html - 如何使用带有 css 滑动门效果的完整内容区域？

Question

我正在使用滑动门效果来显示可变宽度的内容框。效果很好，但问题是制作效果所需的 padding-right 占用了部分内容区域:

http://screencast.com/t/s9dTT1wU

我需要我的内容从图形的左边缘一直延伸到右边缘。我必须支持旧的 IE，所以我不能使用负边距，我不能使用文本缩进，因为我需要内部的完整 HTML 内容，而不仅仅是文本。 CSS 是:

.Quote.Outer
{
    float: left;
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutRight.png);
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 50px;
    height: 81px;
}

.Quote.Inner
{
    background-image: url(/harmony/Common/Web/UI/Resources/Images/ValidationCalloutLeft.png);
    background-position: left center;
    background-repeat: no-repeat;
    height: 81px;
    outline: solid 1px hotpink;
}

标记是:

<div class="Quote Outer">

    <div class="Quote Inner">html content here</div>

</div>    

我很惊讶地发现没有其他人讨论滑动门的这个缺点。是否有合理的跨浏览器解决方案？

Answer 1

你只需要另一个层来允许左填充。

DEMO HERE

或者给内部div添加padding:

DEMO HERE

另一种选择是使用定位将内部内容简单地向右移动一点以减少填充外观。但是您真的不想尝试让内容容器填满整个图像库。这会导致调整大小的问题，这是滑动门的重点。

DEMO HERE

您始终可以编辑图像，以便减少 50 像素的填充。