使用严格的doctype时会出现底部边框

时间:2012-05-22 14:43:02

标签: css

以下代码适用于过渡文档类型,但在使用严格文档类型时会出现一个小的底部边框。我不明白为什么。

<div class="image"><img width="100" height="100" src="aaa.jpg" title="aaa" alt="aaa" /></div>

        div.image {
            -moz-box-shadow: 0 0 5px #939393;
            -ms-box-shadow: 0 0 5px #939393;
            -o-box-shadow: 0 0 5px #939393;
            -webkit-box-shadow: 0 0 5px #939393;
            box-shadow: 0 0 5px #939393;
            padding: 2px;
            display: inline-block;
        }

任何提示?

Edit1:理想情况下,图像类不能包含高度和宽度信息,因为它必须适合图像大小。

1 个答案:

答案 0 :(得分:1)

使用图像大小创建一个图像持有者并隐藏其余部分。

<div class="image">
    <div class="imageholder">
         <img width="100" height="100" src="aaa.jpg" title="aaa" alt="aaa" />
    </div>
</div>

.image {-moz-box-shadow: 0 0 5px #939393;
        -ms-box-shadow: 0 0 5px #939393;
        -o-box-shadow: 0 0 5px #939393;
        -webkit-box-shadow: 0 0 5px #939393;
        box-shadow: 0 0 5px #939393;
        padding: 2px;
        display: inline-block;} // anything, like border, etc.
.imageholder {width: 100px; height: 100px; overflow: hidden;}