覆盖边框样式的用户代理样式表

Question

首先，让我说我对编码很陌生，所以请在你的回答中具体说明 =) 我正在处理的网站上的图像边框存在问题。您可以在此处查看该站点：http://eventswithvizability.ca/

我有 10 个在页面重新加载时旋转的图像，您可以在此处查看 HTML：

    <SCRIPT LANGUAGE="Javascript">
    function banner() { } ; b = new banner() ; n = 0
    b[n++]= "<IMG name=randimg  CLASS='aligncenter1'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter2'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter3'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter4'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter5'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter6'>"
    b[n++]= "<IMG name=randimg  CLASS='aligncenter7'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter8'>"
    b[n++]= "<IMG name=randimg   CLASS='aligncenter9'>"
    b[n++]= "<IMG name=randimg  CLASS='aligncenter10'>"
    i=Math.floor(Math.random() * n) ; 
    document.write( b[i] )
    </SCRIPT>

基本上我不希望我的图像周围有边框。我安装了 firebug，当检查正在读取我的图像样式的元素时我可以看到（所以没有边框），但我所做的没有改变我的图像周围仍然显示边框的事实。

    media="all"
    img[class*="align"], img[class*="wp-image-"] {
    margin: auto;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    border-bottom-color: transparent !important; 
    /*test to see if I can get rid of bottom border*/
    }

我已经尝试修复我的文档类型，添加一个重置样式表，在所有地方添加 !important，并阅读我可以在 google 上找到的所有内容，但它仍然在接收这个 border-style:initial; 来自某个地方的脚本。如果是浏览器，那么我的重置样式表应该已经处理好了..对吗？

请帮忙！我很想弄清楚这一点。

Answer 1

简答

这是渲染引擎中的一个错误，您通过尝试给img 标记一个透明的.PNG 作为背景然后重新缩放它来触发它。您可以通过以下任一方式解决此问题：

1. 将您的 img 标签更改为 div 标签 - 这样浏览器就不会为它们提供背景而遇到太多麻烦了。
2. 不要设置img 标记的背景属性，而是将它们的src 设置为图像URL。

长答案

边框不是用 CSS 创建的；你可以告诉这一点，因为如果你添加一个像border:1px solid black 这样的边框属性，新的边框将与给你带来麻烦的边框共存。同理，border-style:initial 没有错；这只是您声明 border-none 的副作用（initial 仅表示该元素应采用属性的默认值）。

技术原因与重新缩放透明 .PNG 时浏览器渲染引擎中的错误有关。 here 和 here 是其他地方发现的类似错误的一些示例。

但在您的情况下，问题的直接原因似乎是用于显示图像的某种非正统方法，特别是使用透明 .PNG 作为img 标签的背景（而不是源） .这将是一种不好的做法，即使在拉伸透明 .PNG 以填充 img 的背景的过程中，渲染引擎正在创建看起来像边框的灰色伪像。

如果你想在 Javascript 中实现第二个选项，以下应该可以解决问题：

<script language="javascript">
    i= Math.floor(1 + Math.random() * 9);
    if (i < 10) {
        i = "0" + i
    }
    document.write('<img src="http://eventswithvizability.ca/wp-content/themes/lugada/images/bottom' + i + '.png" class="random_image" id="random_image_' + i + '" alt="" />')
</script>

请注意，您不必费心为每个图像单独存储代码创建一个数组，您可以只生成随机变量，然后使用字符串连接将img 标记拼凑在一起。

此外，如果不是为每个图像设置 10 个自定义 CSS 类，所有这些类都具有相同的内容，而是将一个类应用于所有图像，那么您通常会为自己省去麻烦。请记住，id 属性必须是唯一的，但类不能。