html - Chrome 和 Safari 将 'border line' 添加到带有 css 固定高度和宽度的 img

标签 html css google-chrome safari

我在渲染带有类关联的 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>

有人知道如何在所有浏览器中实现相同的行为吗?

最佳答案

这是一个损坏的图像,因为您没有指定 src .点src在某个地方,边界消失了。

浏览器对损坏图像的呈现很大跨浏览器并且取决于您是否包含 alt属性(你总是应该)。一个 1px 的内边框通常在破损的图像中绘制,而不仅仅是 Webkit。您不应故意在文档中包含损坏或无 src 的图像。如果你不想要 src , 它不应该是 <img> .

关于html - Chrome 和 Safari 将 'border line' 添加到带有 css 固定高度和宽度的 img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3709711/

相关文章:

javascript - 使用 React/Gatsby 在该页面上突出显示菜单图标?

html - 实现这种结构的最佳方式是什么?

html - A-Frame/Google Chrome 在 2019 年是否有正确的链接遍历?

python - 使用 Selenium 保存页面

javascript - 在javascript中动态创建类

javascript - 如何在未选中单选按钮时隐藏内容并允许查看其他内容

html - CSS <li> 不扩展

html - Chrome 51 中的背景大小转换 - 错误还是功能?

php - 您可以使用内联样式值进行数学运算,或者使用 SASS 对内联 CSS 进行数学运算吗?

Javascript onclick仅适用于chrome,不适用于firefox或IE