IE8 CSS selector selects, but does not apply the style_问答_开发者

IE8 CSS selector selects, but does not apply the style

开发者 https://www.devze.com 2022-12-26 21:03 出处：网络

Debugging experience http://www.dmhermitage.org/wtfborders.pngThis is making me want to kill myself. I have some really simple CSS to style my input objects:

Debugging experience http://www.dmhermitage.org/wtfborders.pngThis is making me want to kill myself.

I have some really simple CSS to style my input objects:

    input, button
    {
        border: 1px solid #c66600;
        background-color: white;
        color: #7d212f;
        font-family: "Eras Light ITC", Tahoma, sans;
    }

But I don't like the ugly border it puts around radio bu开发者_开发技巧ttons, so I use a selector to kill the border:

input[type=radio] { border: none; }

You can probably guess what browsers this works in and which ONE it does not work in. What's funny is when I press F12 to launch the excellent developer tools in IE8 it actually tells me that the style of the radio buttons has been overridden to 'none' just like I asked it to do, but the border remains on the radio button objects.

I have tried a variety of semantic things, like setting the border width to 0px or the color to something insane like lime green, but it remains the originally assigned color that it got from the first style.

And finally, I have tried only styling 'text' objects, in which case no style is applied to anything. Again, the browser claims to fulfill the CSS selection, but it visually does not happen.

Thoughts?

By the way, this is a DotNetNuke installation with generated code where I can't explicitly set the style of the radio buttons.

Thanks, Dan

IE8 appears to be rendering in quirks mode instead of standards mode, which always messes everything up in IE. To switch to standards mode, the easiest way is to replace the doctype on the first line of the document with this:

<!DOCTYPE HTML>

You may also want to look at some of the HTML being output. You have a span with ID dnn_dnnMENU_ctldnnMENU that contains dozens of made-up attributes like BackColor, SysImgPath, MenuItemHeightand so on. These will have no effect in most browsers (maybe IE interprets them specially, I dunno).

problem is...

Being most helpful ever, please notice, that somehow, your page get's rendered in quirks mode, thus in some screwed way nobody should ever use.

solution [edit]

due to: http://dorward.me.uk/www/ie8/

set your html 4 doctype to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Just in case, have you tried with:

input[type='radio'] { border: none; }

Notice the addition of the apostrophe (or whatever you call the ' in your funny language :P)

I looked at the site, your CSS is correct and there is nothing I can help you with. Good luck!

You can remove the border by setting an inline style attribute in the developer toolbar to border: none;... So for some reason the style isn't applied to the radio-button although the style is traced correctly. Seems like some sort of bug.. Have you tried jacking up the specificity of the rule (it should already be higher than input, but just to try it out)?

For instance:

#page input[type=radio] {
   border: none;
}

It's not possible with CSS anymore (as far as I know), but using this Javascript here it will be possible for you; Styling checkboxes and radio buttons with CSS and Javascript.

Nasty. Try specifying the border colour to white?