0

首先，让我说我对一般编码很陌生，所以请在你的回复中具体说明=）我在我正在处理的网站上遇到图像边框问题。您可以在此处查看该网站：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，并阅读我可以在谷歌上找到的所有内容，但它仍然在使用这个边框样式：初始；来自某处的脚本。如果是浏览器，那么我的重置样式表应该已经处理好了..对吗？

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

4

1 回答 1

2

简短的回答

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

  1. img将您的标签更改为div标签 - 这样浏览器就可以轻松地为它们提供背景。
  2. 不要设置img标签的背景属性，而是将它们设置src为图像 URL。

长答案

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

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

但在您的情况下，问题的直接原因似乎是用于显示图像的某种非正统方法，特别是使用透明 .PNG 作为img标签的背景（而不是源）。这将是不好的做法，即使在拉伸透明 .PNG 以填充 .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属性必须是唯一的，但类不能。

于 2013-03-03T01:29:56.473 回答