I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; 开发者_StackOverflowright: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the >
selector, so the references to body>div#bwrap
won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap
, this implies that the bits inside the body>div#bwrap
are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute
, whereas all other browsers would position it fixed
. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap
selector and remove the body>div#bwrap
one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family
bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching >
selector, which you need to treat in the same way as the first example, although the margin-left
is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;
. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
- div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
- The voice-family part is, as mentioned, a really old hack and should be removed
- If you're explicitly not supporting IE6 you may not need the child selector ">" at all
- Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
- #bwrap { ... all browsers - including ie6 ... }
- html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.
精彩评论