User agent stylesheet overriding border styles

问题

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/

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

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.

回答1:

Short answer

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:

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

Long answer

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

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.

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.

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>

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.

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.

来源：https://stackoverflow.com/questions/15163448/user-agent-stylesheet-overriding-border-styles

标签

css

styles

overriding

user-agent