为什么我的图像在 Chrome 中仍然有边框，即使有“border: none;”？

在 Chrome 中删除图像边框

在 Chrome 和 IE9 中处理图像时遇到的一个常见问题是出现持久的细边框尽管指定了“轮廓：无；”，但仍围绕图像和“边框：无；”在 CSS 中。要解决此问题，请考虑以下方法：

Chrome 错误规避

Chrome 存在一个已知错误，该错误会忽略“border: none;”风格。要解决此问题，请使用以下 CSS id 块创建一个具有所需填充的透明区域，有效地欺骗 Chrome 认为没有图像：

<code class="css">#dlbutn {
    display: block;
    width: 0px;
    height: 0px;
    outline: none;
    padding: 43px 51px 43px 51px;
    margin: 0 auto 5px auto;
    background-image: url(/images/download-button-102x86.png);
    background-repeat: no-repeat;
}</code>

样式重复

另一个解决方案是在 CSS 中以及通过 jQuery 的 border=0 属性复制边框和轮廓删除样式。这种冗余方法有时会强制浏览器正确应用样式。

<code class="css">img, a img {
    outline: none;
    border: none;
}</code>

<code class="js">$(document).ready(function(){
    $('img').attr('border', '0');
});</code>

其他注意事项

确保图像文件的尺寸与CSS 中指定的宽度和高度。如果存在差异，浏览器可能会添加边框进行补偿。

通过实施这些解决方案，您可以有效删除 Chrome 和 IE9 中不需要的图像边框，为您的网页提供一致且视觉上令人愉悦的外观.

以上是为什么我的图像在 Chrome 中仍然有边框，即使有“border: none;”？的详细内容。更多信息请关注PHP中文网其他相关文章！