Chrome和Safari添加'边框线'img与CSS固定的高度和宽度

我有一个小问题，呈现与类关联的img标记。我用一个简单的html页面重新创建了这个问题。Chrome和Safari添加'边框线'img与CSS固定的高度和宽度

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

任何人都知道如何在所有浏览器中具有相同的行为？

来源

2010-09-14 Sergio Couture

这是一个破碎的图像，因为你指定没有src。将src指向某处并且边框消失。

浏览器渲染破碎的图像变化很大很大跨浏览器，并取决于你是否包含alt属性（你总是应该）。一个1px的内部边界通常在破碎的图像中绘制，而不仅仅是Webkit。您不应该故意在文档中包含损坏或无图像的图像。如果你不想要src，它不应该是<img>。

来源

2010-09-14 14:37:10 bobince

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

来源

2012-11-20 04:05:35 Protonova

Chrome和Safari添加'边框线'img与CSS固定的高度和宽度

回答

相关问题