1

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

http://screencast.com/t/s9dTT1wU

我需要我的内容从图形的左边缘一直到右边缘。我必须支持旧的 IE，所以我不能使用负边距，也不能使用 text-indent 因为我需要内部的完整 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>

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

4

1 回答 1

1

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

在这里演示

或者向内部 div 添加填充：

在这里演示

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

在这里演示

您可以随时编辑图像以减少 50 像素的填充。

于 2012-02-10T20:53:48.587 回答