First, let's talk about the differences between Firefox and IE in CSS width display:
In fact, CSS 'width' refers to the width of the width in the standard CSS, and the width in Firefox is the width. It only contains the width of the content in the container. Internet Explorer 'width' indicates the width of the entire container, including content, padding, and border.
In Firefox: Container width = content width + padding width + Border Width
In ie: Content width = the container width you define (Internet Explorer 'width')-padding width-Border Width
Therefore, if you define
Width: 120px; padding: 5px
The display width in IE is 120px; (padding is in width)
The display width in Firefox is 125px;
This is why the web page looks good in IE and will wrap in Firefox, breaking the page layout.
Therefore, the style sheet must be defined as follows:
Width: 115px! Important; width: 120px; padding: 5px;
Note that! Important; must be in front.
Key Points of CSS compatibility:
- DOCTYPE affects CSS Processing
- FF: When div sets margin-left and margin-right to auto, it is already centered, and IE is not working.
- FF: When you set text-align for the body, you must set margin: auto (mainly margin-left, margin-right) for the div to be centered.
- FF: After padding is set, the div will increase the height and width, but IE will not, so we need to use it! Set one more height and width for important.
- FF: Yes! Important, IE is ignored, available! Important sets a special style for FF
- Vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text to the vertical center.
The disadvantage is that you need to control the content rather than line feed.
- Cursor: pointer can display the cursor finger shape in ie ff at the same time, hand only IE Can
- FF: adds a border and a background color to the link. You must set display: block and float: left to avoid line breaks. Set the height for a and menubar by referring to menubar.
To avoid misplacement of the bottom side, if no height is set, you can insert a space in menubar.
Small set of XHTML + CSS compatibility Solutions
The use of XHTML + CSS architecture has many advantages, but there are also some problems, whether it is because of the inskillful use or unclear ideas, I first put some of the problems I encountered
The question is written below, and you can find it everywhere in the province ^
- The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. solution:
Div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed! Important attributes
IE cannot be recognized, but other browsers can. So in IE, it is actually explained as follows:
If div {maring: 30px; margin: 28px} is repeatedly defined, it is executed according to the last one. Therefore, you cannot write only margin: XXpx! Important;
- The BOX interpretations of IE5 and IE6 are inconsistent. div {width: 300px; margin: 0 10px 0 10px;} div width is interpreted as 300px-10px (right filling) -10px (left filled) the final div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}. I don't know much about this, I only know that both IE5 and firefox support this function, but IE6 does not. If anyone understands this, please let me know. Thank you! :)
- Ul labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define
Ul {margin: 0; padding: 0;} solves most problems.
- The script does not support the language attribute in xhtml1.1. You only need to change the code
<Script type = "text/javascript">
- Margin doubling Problem
The div set to float doubles the margin set in ie. This is a bug in ie6.
The solution is to add the display: inline In the div;
For example:
<# Div id = "imfloat"> </# div>
The corresponding css is
# IamFloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}
