How to normalize padding and margins across browsers
How do other designers normalize padding and margins across br开发者_开发技巧owsers. I have tried CSS Resets (currently using the YUI one), but I still run into a lot of inconsistencies.
It seems for some elements, with some browsers, setting a padding or margin to 0px will trigger the browser to use a default padding and margin determined by that browser. Is there a way to hard reset the padding or margin across all browser so there is a consistent look?
Update
It seems from additional research and the feedback here, it's near impossible to get websites to look the same across different browsers to the letter. I think I'll stick with using a CSS Reset and just try to plan out my sites better.
I'm not sure how to overcome the default browser mechanisms that override style settings and it would probably be too much effort to do so.
This is usually solved with a CSS reset but not all of them are complete. On some browsers, the overall body has to have its border set to 0 (i.e. Opera and sometimes IE) to be truly the same. Try the following:
body,html{margin:0;border:0;padding:0;}
Since you don't say which element or give a link I can't really go too far into this. Which elements are you having trouble with?
Its not worth the extra CSS interactions and extra code to add a complete set of "normalizing" padding or margin elements.
Its best to style for what you need by explicitly stating the padding and margin for the elements you are using on your pages.
Paddings are usually 0 everywhere. It are the margins which are the most disbalanced among browsers. Just define your own margins on HTML block elements. A CSS reset is like a sledgehammer. You'd need to redefine more than only margins. But it may be helpful for beginners since they often can't at first glance distinguish between default inline and block elements in HTML. A CSS reset would force them to redefine the one and other "the right way".
Related questions:
- Are margin and padding the most disbalanced among browsers?
That said, if you keep seeing inconsistencies among browsers, then it may happen that you're using a doctype which forces the browser into quirksmode. In MSIE the box model bug would then come alive. You'd like to use a strict doctype: <!DOCTYPE html>.
See also:
- Activating browser modes with doctype
加载中,请稍侯......
精彩评论