It is a commonplace issue that CSS is compatible with various browsers. There are tutorials all over the Internet. The following content is not too novel and is purely a personal summary. I hope it will be helpful to beginners.
1. CSS HACK
The following two methods can solve almost all HACK today.
1, !important
With IE7’s support for !important, ! The important method is now only for IE6 HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
The following is the quoted content:
2, IE6/IE77 for FireFox
The following are quoted Content: * html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.
Note: * html HACK for IE7 must ensure the following statement at the top of the HTML:
2. Universal float closure
For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup ] Add the following code to Global CSS, and add class="clearfix" to the div that needs to be closed. It works repeatedly.
1. Setting padding on a div in FF will cause the width and height to increase, but IE will not. (can be solved with !important) 2, centering problem. 1). Vertically center. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content.) 2). Horizontally centered. margin: 0 auto; (of course not universal) 3, if you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags) 4, FF and IE The difference in BOX understanding leads to a difference of 2px and problems such as the margin of a div set to float doubling under IE. 5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists) 6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptability. 7. Regarding the hand cursor . cursor: pointer. And hand is only applicable to IE.
1 CSS styles for firefox ie6 and ie7 Now most of them use !important to hack, and the test for ie6 and firefox can display normally, But ie7 can correctly interpret !important, which will cause the page to not be displayed as required! Find a pin A good hack for IE7 is to use "*html". Now browse it with IE7 and there should be no problem. Now write a CSS like this:
The following is the quoted content: #1 { color: #333; } * html #1 { color: #666; } * html #1 { color: #999; }
Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7.
2 Centering issues in css layout The main style definitions are as follows:
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } Explanation: First define TEXT-ALIGN: center in the parent element; this means that the content in the parent element is centered; for IE, this setting is enough. But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" when defining the child element. It should be noted that if you want to use this method to center the entire page, it is recommended not to Set in a DIV, you can split multiple divs in sequence. Just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.
#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float} Let’s talk about block in detail here , inline two elements. The characteristic of the Block element is that it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristic of the Inline element is that it is on the same line as other elements. ,...uncontrollable (embedded element);
CSS: #box {background-color:#eee; } #box p {margin-top: 20px; margin-bottom: 20px; text-align:center; } Solution: in Add two empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.
6. Analysis of CSS compatibility points IE vs FF
CSS compatibility points:
DOCTYPE affects CSS processing
FF: div sets margin-left, margin -right is already centered when it is set to auto, but IE cannot >FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use !important to set an additional height and width
FF: !important is supported, but IE ignores it. You can use !important as FF specifically sets the style
to vertically center the div: vertical-align:middle; increase the line spacing to the same height as the entire DIV, line-height:200px; and then insert text and it will be vertically centered. The disadvantage is that it is necessary to 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: Add a border and background color to the link, and you need to set the display: block, and set float: left to ensure no line breaks. Referring to the menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If the height is not set, you can insert a space in the menubar. XHTML CSS Compatibility Solution Collection
There are many benefits to using the XHTML+CSS architecture. But there are indeed some problems, whether it is due to unskilled use or unclear thinking, I will first write down some of the problems I encountered below to save everyone from looking around^^
1. In mozilla firefox Inconsistent interpretation with the BOX model in IE, resulting in a 2px difference. Solution:
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. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;
2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of the div is 280px, while on IE6 and other browsers the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications
, I don’t quite understand what this is, just I know that both IE5 and Firefox support it but IE6 does not. If anyone understands it, please let me know. Thanks! :)
3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first
ul{margin:0;padding:0;}
can solve most problems
4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to
< type=" text/java">
That’s it
7. 10 CSS skills you may not know
1. CSS font attribute abbreviation rules
This is generally how to set font attributes with CSS:
The following is the quoted content:
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans -serif; But you can also write them all on one line:
Great! Just one caveat: this shorthand method only works when both the font-size and font-family properties are specified. Also, if you don't set font-weight, font-style, and font-variant, they will use default values, so keep this in mind.
2. Use two classes at the same time
Generally, only one class (Class) can be set for an element, but this does not mean that two cannot be used. In fact, you can do this:
...
Give the P element two classes at the same time, with spaces in between Turn on, so that all attributes of the text and side classes will be added to the P element. If there is a conflict between the attributes in the two classes, the one set later will take effect, that is, the attributes of the class placed later in the CSS file will take effect.
Supplement: For an ID, you cannot write
...
nor can you write it like this
3. Lack of CSS border The default value
can usually set the color, width and style of the border, such as:
border: 3px solid #000
This will display the border as 3 pixels wide, Black, solid line. But in fact, you only need to specify the style here.
#box { width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
...
In this way, no matter what browser, the width will be 150 points.
7. Align block elements in the center
If you want to make a fixed-width web page and want the web page to be centered horizontally, it is usually like this:
#content { width: 700px ; margin: 0 auto }
You would use
to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display this effect. Change the CSS as follows:
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
This will center the content of the web page. So
text-align: left was added to Content.
8. Use CSS to handle vertical alignment
Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.
What is the CSS method? By the way, set the line-height of these words to 2em: line-height: 2em and that's it.
9. Positioning of CSS within a container
One benefit of CSS is that you can position an element arbitrarily, even within a container. For example, for this container:
#container { position: relative }
In this way, all elements in the container will be relatively positioned. You can use it like this:
...
If you want to position it 30 points from the left and 5 points from the top, you can do this:
Note that the order of the 4 numbers is: up, right, down, left. Of course, sometimes positioning rather than margins is better.
10. The background color that goes straight to the bottom of the screen
It is impossible to control it in the vertical direction with CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, it is very convenient to use a table, but if you only use CSS like this:
#navigation { background: blue; width: 150px }
A shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. What to do?
Unfortunately, the only way to cheat is to add a background image to the shorter column, with the same width as the column width, and make it the same color as the set background color.
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
You cannot use em as the unit at this time, because in that case, once the reader changes the font Size, this trick will be revealed, only px can be used.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
