用户代理样式表覆盖边框样式 [英] User agent stylesheet overriding border styles

问题描述

首先，让我说我对编码总体而言还很陌生，所以请在您的回复中明确说明=) 我正在处理的网站上的图像周围有边框问题.您可以在此处查看该站点: http://eventswithvizability.ca/

First off, let me say I am pretty new to coding in general, so please be specific in your responses =) I am having an issue with borders around images on a site I am working on. You can see the site here: http://eventswithvizability.ca/

我有10张图片在页面重新加载时旋转，您可以在此处查看HTML:

I have 10 images rotating on page reload, you can see the HTML here:

    <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>

基本上，我的图像周围没有边框.我已经安装了萤火虫，在检查正在读取图像样式的元素时可以看到它(因此没有边框)，但是我所做的一切都没有改变我在图像周围仍然显示边框的事实.

Basically I want no borders around my images. I have firebug installed, and I can see when inspecting the element that is is reading my style for the images (so no borders), but nothing I do is changing the fact that I still have a border displaying around my images.

    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; 脚本.如果是浏览器，那么我的重置样式表应该已经处理好了.

I have tried fixing my doctype, adding a reset stylesheet, adding !important all over the place, and reading everything I could track down on google, but it is still picking up this border-style:initial; script from somewhere. If it is the browser, then my reset stylesheet should have taken care of it..right?

请帮助！我正准备尝试解决这个问题.

Please help! I am going batty trying to figure this out.

推荐答案

简短答案

这是渲染引擎中的错误，您可以通过尝试给img标签赋予透明.PNG作为背景，然后重新缩放来触发该错误.您可以通过以下任一方法解决此问题:

This is a bug in the rendering engine, which you're triggering by trying to give an img tag a transparent .PNG as a background and then re-scaling it. You can fix this by either:

1. 将您的img标记更改为div标记-这样浏览器为它们提供背景就没有太多麻烦了.
2. 与其设置img标签的background属性，不如将其src设置为图像URL.

1. Changing your img tags to div tags - then the browser doesn't have so much trouble giving them backgrounds.
2. Rather than setting the background property of the img tags, set their src to the image URLs instead.

好答案

未使用CSS创建边框；您之所以会这样说是因为，如果添加边框属性(如border:1px solid black)，新边框将与引起麻烦的边框共存.同样，border-style:initial也不是错误.这只是声明border-none的副作用(initial只是意味着该元素应采用该属性的默认值).

The border is not being created with CSS; you can tell this because if you add a border property like border:1px solid black the new border will coexist with the one causing you trouble. By the same token, border-style:initial is not at fault; that's just a side-effect of your stating border-none (initial just means that the element should take the default value for the attribute).

技术原因与重新缩放透明.PNG时浏览器渲染引擎中的错误有关.在其他地方注意到的类似错误的一些示例是此处.

The technical cause has to do with bugs in browser rendering engines when re-scaling transparent .PNGs. Some examples of similar bugs being noticed elsewhere are here and here.

但是，在您的情况下，此问题的直接原因似乎是用于显示图像的方法有些不合常规，特别是使用透明.PNG作为img标记的背景(而非来源) .即使不是在拉伸透明.PNG来填充img背景的过程中，渲染引擎也会创建看起来像边框的灰色瑕疵，这不是一个好习惯.

But in your case, the proximate cause of the issue seems to be the somewhat unorthodox method being used to display the images, specifically the use of transparent .PNGs as the background (rather than the source) of your img tags. This would be bad practice, even if it weren't the case that in the process of stretching the transparent .PNGs to fill the background of the img, the rendering engine is creating the grey artifacts that look like borders.

如果要在Javascript中实现第二个选项，则应使用以下方法:

If you want to implement the second option in Javascript, the following should do the trick:

<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标记拼凑在一起.

Note that rather than going to the trouble of creating an array with the code for each image stored separately, you can just generate the random variables and then use string concatenation to patch together an img tag on the fly.

此外，如果为每个图像分配10个自定义CSS类(全部具有相同的内容)，而不是对它们全部应用一个类，则通常可以避免麻烦.请记住，id属性必须是唯一的，但不能是类.

Also, you'll save yourself trouble generally if instead of having 10 custom CSS classes for each image, all with the same content, you instead have one class applied to them all. Remember, id attributes must be unique, but not classes.

这篇关于用户代理样式表覆盖边框样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！