Question

我正在使用滑动门效果来显示可变宽度的内容框。效果很好，但问题是制作效果所需的填充权限会占用内容区域的一部分：

我需要我的内容从图形的左边缘一直到右边缘。我必须支持旧的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中添加填充：

DEMO HERE

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

DEMO HERE

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

如何使用具有css推拉门效果的完整内容区域？

1 个答案: