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*/
    }

我已经尝试修复我的doctype，添加了一个重置样式表，在整个地方添加！important，并阅读我可以在谷歌上追踪的所有内容，但它仍然在拾取这个 border-style：initial; < / strong>来自某个地方的脚本。如果它是浏览器，那么我的重置样式表应该照顾它..正确吗？

请帮忙！我想要解决这个问题。

Answer 1

简短回答

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

将img代码更改为div代码 - 然后浏览器在为其提供背景方面没有太多麻烦。
不是设置img代码的背景属性，而是将src设置为图片网址。

答案很长

没有使用CSS创建边框;你可以这么说，因为如果你添加一个像border:1px solid black这样的边框属性，新边框将与导致你麻烦的边框共存。出于同样的原因，border-style:initial没有错;这只是你陈述border-none的副作用（initial只是意味着元素应该采用属性的默认值。）

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

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

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

img

请注意，不是单独创建一个包含每个图像代码的数组的麻烦，而是可以生成随机变量，然后使用字符串连接动态地将<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>标记拼接在一起。

另外，如果不是为每个图像分配10个自定义CSS类，而是使用相同的内容，而是为所有内容应用了一个类，那么通常可以省去自己的麻烦。请记住，img属性必须是唯一的，而不是类。

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

1 个答案: