Question

以下代码与过渡 doctype 完全吻合, 但使用严格的 doctype 时会出现一个小底边框。我无法理解原因。

<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;
        }

有线索吗?

编辑1: 理想的情况是,图像类不能有高度和宽度信息, 因为它必须适合图像大小。

Answer 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;}

友情链接