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. It is purely a personal summary. I hope it will be helpful to beginners.
1. CSS HACK
The following two methods can solve almost all HACKs today.
1, !important
With IE7’s support for !important, the !important method now HACK only for IE6.
(Pay attention to the writing. Remember that the declaration position needs to be in advance.)
2, IE6/IE77 for FireFox
* +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 that there is 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 p that needs to be closed. It works every time.
3. Other compatibility tips
1, Setting padding for p in FF will cause the width and height to increase, but IE will not. (can be solved with !important)
2, Centering problem.
1). Vertically centered. Set line-height to the same height as the current p, and then pass vertical-align: middle. (Be careful not to wrap the content.)
2). Horizontally centered. margin: 0 auto; (Of course it is not omnipotent)
#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, The difference in understanding of BOX between FF and IE results in a 2px difference and some are set to float p has issues such as doubling the margin 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, As an external wrapper, p should not have a fixed height. It is best to add overflow: hidden. to achieve height adaptation.
7, Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE.
1 CSS styles for firefox ie6 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 Not 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:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
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 setting the child element definition
It should be noted that if you want to use this method to center the entire page, it is not recommended. Set in a p, you can remove multiple ps in sequence.
Just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each removed p. That's it.
3 Different interpretations of the box model
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
# box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 generated by floating ie Double distance
#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}
Details here Let’s look at the two elements block and inline. The characteristic of the Block element is: 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: it is on the same page as other elements. On the line,... cannot be controlled (inline elements);
#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the same line arrangement Effect diplay:table;
IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is min. This will cause a big problem. If you only use width and height,
these two values will not change in a normal browser. If you only use min-width and min-height, it is equivalent to not setting the width and height under IE. high.
For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 The minimum width of the page
min-width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the typesetting is always correct. But IE doesn't recognize this,
and it actually uses width as the minimum width. In order to make this command also available on IE, you can put a
under the
tag, and then specify a class for p:7 Clear floating
.hackbox{ display:table; //Display the object as a block element-level table} or .hackbox{ clear:both;}
Or add: after (Pseudo object), sets the content that occurs after the object, usually used in conjunction with content. IE does not support this pseudo object, and non-Ie browsers support it.
So it does not affect IE/WIN browsers. The most troublesome thing about this...#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 pFloating IE The text generates a 3-pixel bug
The left object floats, the right side is positioned using the left margin of the outer patch, and the text within the right object will have a 3px spacing from the left.
#box{ float :left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //This sentence is the key}
HTML code
9 Attribute selector (this is not compatible, it is a bug in hiding css)
p[id]{}p[id]{}
This is for IE6.0 and IE6 Versions below .0 are hidden. The functions of FF and OPera
There are still differences between attribute selectors and sub-selectors. The scope of sub-selectors is narrowed in form, and the scope of attribute selectors is relatively large, such as p[id ], all p tags with ids are of the same style.
10 IE hide-and-seek problem
When the p application is complex, there are some links in each column, p, etc. At this time, hide-and-seek problems tend to occur.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.
11 Height non-adaptation
Height non-adaptation means that when the height of the inner layer object changes, the height of the outer layer cannot be automatically adjusted, especially when the inner layer object uses
margin or paddign hour.
Example:
The content in the p object
6. Analysis of CSS compatibility points IE vs FF
CSS compatibility points:
DOCTYPE affects CSS processing
FF: p Set margin-left, margin -right is already centered when it is set to auto, but it does not work in IE
FF: When body sets text-align, p needs to set margin: auto (mainly margin-left, margin-right) to be centered
FF: After setting padding, p will increase 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 will ignore it, available! important Specially set the style for FF
p's vertical centering problem: vertical-align:middle; Increase the line spacing to the same height as the entire p line-height:200px; Then insert the 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: Links add borders and background colors, and display is required: 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 menubar. XHTML+CSS Compatibility Solution Collection
There are many benefits of using 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 The BOX model interpretation in firefox and IE is inconsistent, resulting in a 2px difference. Solution:
p{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be written On the contrary, according to Ajie, the !important attribute is not recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
p{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 p{width:300px;margin:0 10px 0 10px;}p under IE5 will be interpreted as 300px-10px (right padding)-10px (left Padding) The final width of p 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
p{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
, about this/**/ I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands, 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 of the 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 using CSS:
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
But it’s also ok Write them all on one line:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
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, you can only set one class (Class) for an element, but this does not mean that you cannot use two. 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 this3. 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.
If only style is specified, other attributes will use default values. Generally, the default width of Border is medium, which is generally equal to 3 to 4 pixels; the default color is the color of the text. If this value is just right, there is no need to set so many settings.
4. CSS for document printing
Many websites have a version for printing, but in fact this is not needed because CSS can be used to set the printing style.
In other words, you can specify two CSS files for the page, one for screen display and one for printing:
The first line is for display, and the second line is for printing. Pay attention to the media attribute.
But what should be written in the printing CSS? You can set it up the same way you would design normal CSS. While designing, you can set this CSS to display CSS to check its effect. Maybe you will use the display: none command to turn off some decorative images and turn off some navigation buttons. To learn more, see the "Printing Differences" article.
5. Image replacement skills
It is generally recommended to use standard HTML to display text instead of images. This is not only faster, but also more readable. But if you want to use some special fonts, you can only use pictures.
For example, if you want to create an icon for selling things, you would use this image:
Of course this is possible, but for search engines, compared with normal text, they have little interest in the replacement text in alt. This is because many designers Put a lot of keywords here to trick search engines. So the method should be like this:
But this way there is no special font. To achieve the same effect, you can design CSS like this:
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
Pay attention to replacing the image height with the height of the real image. Here, the image will be displayed as the background, and because the indentation of -2000 pixels is set, the real text will appear 2000 points on the left side of the screen and will be invisible. But for people who turn off the picture, they may not be able to see it at all, so be careful.
6. Another adjustment technique for the CSS box model
The adjustment of this Box model is mainly for IE browsers before IE6. They count the border width and white space in the element width. superior. For example:
#box { width: 100px; border: 5px; padding: 20px }
Call it like this:
. ..
At this time, the full width of the box should be 150 points, which is correct on all browsers except IE browsers before IE6. But on browsers like IE5, its full width is still 100 points. This difference can be handled using the Box adjustment method invented by previous people.
But the same purpose can be achieved with CSS to make them display consistent.
#box { width: 150px } #box p { border: 5px; padding: 20px }
Call like this:
...
In this way, no matter what browser, the width will be 150 points.
7. Center alignment of block elements
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 of the benefits 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:
#navigation { position: absolute; left: 30px; top: 5px }
Of course, you can also do this:
margin: 5px 0 0 30px
Note that the order of the four numbers is: top, right, bottom, left. Of course, sometimes positioning rather than margins is better.
10. The background color that goes straight to the bottom of the screen
cannot be controlled by CSS in the vertical direction. 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 }
The shorter navigation bar will not go straight to the bottom, it will end when the content ends halfway. what can we do about it?
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.
The above is the detailed content of Detailed introduction to frequently asked questions about CSS multi-browsing. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
