Question

我在渲染带有与类关联的img标记时遇到了一个小问题。我用一个简单的html页面重新创建了这个问题。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test for image problem</title>
</head>
<body>
<style> 
.image  {
    float: left;
    cursor: pointer;
    height:15px;
    width:15px;
}
</style>
    <p>This is a test </p>
    <img class="image" id="image">
</body>
</html>

有人知道如何在所有浏览器中使用相同的行为吗？

Answer 1

这是一张破损的图片，因为您没有指定src。将src指向某处，边界就会消失。

破坏图像的浏览器呈现在极大跨浏览器时会有所不同，具体取决于您是否包含alt属性（您始终应该这样做）。 1px内边框通常在破碎图像中绘制，而不仅仅是Webkit。您不应故意在文档中包含损坏或srcless图像。如果您不想要src，则不应该是<img>。

Answer 2

Yup，Chrome和Safari这样做是为了img标签而没有hrefs ...有点愚蠢，但你可以做的是将img变成'a'，'div'或'span'标签。也可能想添加“display：inline-block”来模仿html5 img标签。希望这有帮助，我花了一段时间才找到Bobince的答案。

Chrome和Safari将“边框线”添加到img，css固定高度和宽度

2 个答案: