Home >Web Front-end >HTML Tutorial >DIV CSS compatibility issues (2)_html/css_WEB-ITnose
DIV CSS compatibility issues (2)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:071228browse
Regarding the issue of div css being compatible with IE and firefox
The div css webpage that was finally created fully complies with W3C standards. The display is perfect under IE7. When I tested it with Firefox, I found it was confusing
and it was terrible. After some research, I found that compatibility is very
simple.
1. Add div {overflow: hidden;}, the purpose is to make the div automatically adapt to the content height
2. Horizontal div coat div
Additionally set
ul {
margin: 0px;
padding: 0px;
}
is to eliminate the space in front of li
div css compatibility issues
CSS compatibility points ：DOCTYPE affects CSS processing
FF: div is already centered when margin-left and margin-right are set to auto, but IE does not work
FF: When body is set to text-align, div needs to set margin: auto (mainly margin-left, margin-right) can be used to
center
FF: After setting padding, the div will increase height and width, but IE will not, so you need to use !important Set one more
height and width
FF: supports !important, IE ignores it, you can use !important to specially set the style for FF
Vertical centering problem of div: vertical- align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text after
and it will be vertically centered. The disadvantage is that
Control the content without wrapping
cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
FF: link with border and background Color, you need to set display: block, and set float: left to ensure no line breaks. Referring to
menubar, setting the height of a and menubar is to
avoid dislocation of the bottom edge display. If height is not set, you can insert a space in the menubar. Small set of XHTML CSS compatibility solutions
There are many benefits to using XHTML CSS framework, but there are indeed some problems. Whether it is due to inexperience or unclear thinking, I will first
write down some of the problems I encountered below. .
1. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers Can be recognized by
. So it is actually interpreted like this under IE
:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px }
If there are repeated definitions, the last one will be executed, so you cannot just write margin:XXpx!important;
2. The BOX interpretation of IE5 and IE6 is inconsistent. div{width:300px; under IE5; margin:0 10px 0 10px;} The width of the div will be interpreted as
300px- 10px (right padding)-10px (left padding). The final width of
div is 280px, while in IE6 On other browsers, the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px
. At this time we can make the following modifications:
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width:340px;margin:0 10px 0 10px}
I don’t quite understand what this is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands it, please tell me
. Thanks. ! :)
3.ul tag has padding value by default in Mozilla, but in IE only margin has value, so define it first
div css xhtml xml Example Source Code Example Source Code [ www.52css.com]
ul{margin:0;padding:0;}
can solve most problems
4. Regarding scripts, it is not supported in xhtml1.1 language attribute, just change the code to
div css xhtml xml Example Source Code Example Source Code [www.52css.com]