Question

我正在设计一种在一些网络应用中使用的简洁风格。而且我遇到了一个IE错误（总是一样）。

这很简单。我有一个渐变背景，在它上面是一个没有边框的矩形，它没有任何东西，周围有阴影，给人一种幻觉，它在背景上，正如你在snapshot中看到的那样。

除了IE之外，它在所有浏览器中都很好。 IE显示为this。

IE使用“content-top-shadow”类增加大约4 px到顶部div。它不应该。我使用了margin和padding 0来修复它而没有运气。

PS：png具有透明度。

任何想法我如何解决这个错误，或者CSS中的错误？

感谢。

以下是代码：

HTML

    <div class="content-holder">
        <div class="content-center">
            <div class="content-top-shadow"></div>
            <div class="content-center-holder"></div>
            <div class="content-bottom-shadow"></div>
        </div>
    </div>

CSS

.content-holder {
    width: 100%;
    height: 570px; /*once complete change to auto*/
    background-image: url(images/content-holder-bg.png);
    background-repeat: repeat-x;
    padding-top: 20px;
    text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
    width: 918px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.content-top-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-top-shadow-bg.png);
    background-repeat: no-repeat;
}
.content-center-holder {
    width: 918px;
    height: 200px; /*once complete change to auto*/
    background-image: url(images/content-center-holder-bg.png);
    background-repeat: repeat-y;
}
.content-bottom-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-bottom-shadow-bg.png);
    background-repeat: no-repeat;
}

Answer 1

IE认为你的div应该大于9px，因为文本大小，即使其中没有文本（！），所以你需要设置

font-size:1px;

或类似的东西，在顶部和底部div。

Answer 2

这里有一些东西可以帮助我克服跨浏览器的不兼容性，特别是在DIV和TDs中。将此作为空白区域的唯一内容，同时确保您的spacer.gif图像是1px x 1px透明点。干杯！

<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>

IE 7/8 CSS div大小问题与图像背景

2 个答案: