Questions about CSS compatibility

Questions about CSS compatibility
The last time I mentioned in the forum what should I pay attention to in CSS for various browsers, I was depressed. Later, no one sorted out the information and I checked the information myself! I want to help you:

Key Points of CSS compatibility:

IE vs FF

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. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space XHTML + CSS compatibility solution small set in menubar.

There are many advantages to using the XHTML + CSS architecture, but there are also some problems. Whether it is because I am not skilled or have unclear ideas, I will first write down some of my problems below, search for the province ^

1. 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 entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

Div {maring: 30px; margin: 28px}

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

2. 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 quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

3. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we define it first.

Ul {margin: 0; padding: 0 ;}

Most problems can be solved.

4. For the script, the language attribute is not supported in xhtml1.1.CodeChange

<SCRIPT type = "text/JavaScript">

You can.
10 CSS skills you may not know
1. Simplified CSS font attributes

In general, CSS is used to set the font attributes as follows:

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 all of them to one line:

Font: bold italic small-caps 1em/1.5em verdana, sans-serif;

Really good! Only one note: this shorthand method takes effect only when both the font-size and font-family attributes are specified. Also, if you do not set font-weight, font-style, and font-varient, they will use the default value, which should be noted.

2. Use two classes at the same time

Generally, only one class can be set for one element, but this does not mean that two classes cannot be used. In fact, you can:

<P class = "text side">... </P>

At the same time, two classes are given to the P element, with an empty lattice in the middle. In this way, the attributes of all the text and side classes will be added to the P element. If the attributes of the two classes conflict, the subsequent settings take effect, that is, the attributes of the classes placed in the CSS file take effect.

Supplement: for an ID, neither <p id = "text side">... </P> can be written in this way.

3. Default Value of CSS border

You can usually set the border color, width, and style, such:

Border: 3px solid #000

The border is displayed as 3 pixels wide, black, and solid. However, you only need to specify the style here.

If only the style is specified, the default value is used for other attributes. Generally, the default width of border is medium, which is generally 3 to 4 pixels. The default color is the text color. If this value is correct, you don't need to set that much.

4. CSS for document printing

Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style.

That is to say, you can specify two CSS files for the page, one for screen display and the other for printing:

<Link type = "text/CSS" rel = "stylesheet" href = "stylesheet.css" Media = "screen"/> <link type = "text/CSS" rel = "stylesheet" href = "printstyle.css" Media = "print"/>

1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes.

But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, 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 then turn off some navigation buttons. For more information, see "Print differences.

5. Image replacement skills

Generally, we recommend that you use standard HTML to display text instead of images. This is fast and readable. However, if you want to use some special fonts, you can only use images.

For example, if you want to use the entire selling icon, you can use this image:

<H1>

This is certainly acceptable, but for search engines, they are less interested in replacing text in alt than normal text, because many designers put a lot of keywords here to cheat the search engine. The method should be as follows:

<H1> buy widgets

However, there is no special font. To achieve the same effect, you can design CSS as follows:

H1 {Background: url(widget-image.gif) No-Repeat; Height: Image Height text-indent:-2000px}

Change the Image Height to the actual image height. Here, the image is displayed as a background, and the real text is Indented by setting-2000 pixels. They will appear at 2000 on the left of the screen and will not be seen. However, this may not be visible to anyone who closes the image.

6. Another adjustment technique for the CSS Box Model

The box model is adjusted mainly for IE browser before IE6. They calculate the boundary width and blank space on the element width. For example:

# Box {width: 100px; Border: 5px; padding: 20px}

Call it like this:

<Div id = "box">... </div>

At this time, the full width of the box should be 150 points, which is correct in all browsers except IE6. However, in a browser like ie5, its full width is still 100 points. The box adjustment method invented by the predecessors can be used to deal with this difference.

However, CSS can achieve the same purpose to make them display the same effect.

# Box {width: 150px} # Box Div {border: 5px; padding: 20px}

Call this method as follows:

<Div id = "box"> <div>... </div>

In this way, no matter what browser, the width will be 150 points.

7. Align block elements in Center

If you want to build a fixed-width webpage and make the webpage horizontally centered, it is usually like this:

# Content {width: 700px; margin: 0 auto}

You will use <Div id = "content"> to enclose all elements. This is very simple, but it is not good enough. This effect will not be displayed in earlier versions of IE6. Change CSS as follows:

Body {text-align: center }# content {text-align: Left; width: 700px; margin: 0 auto}

This will center the webpage content, so the content is added

Text-align: left.

8. Use CSS to process Vertical Alignment

Vertical alignment can be easily implemented using tables. You can set the table unit vertical-align: Middle. But this is useless for CSS. This attribute is useless if you want to set a navigation bar to 2 em and center the navigation text vertically.

What is the CSS method? By the way, set the Row Height of the text to 2em: Line-Height: 2em.

9. Position CSS in the container

One advantage of CSS is that one element can be located at any time in a container. For example, for this container:

# Container {position: relative}

In this way, all elements in the container are relatively located, and can be used as follows:

<Div id = "Container"> <Div id = "navigation">... </div>

If you want to locate at 30 to the left and 5 to 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 the positioning method is better than the margin method.
10. Background Color directed to the bottom of the screen
CSS cannot control the vertical direction. If you want to direct the navigation bar to the bottom of the page like the content bar, It is very convenient to use a table, but if you only use this CSS:
# Navigation {Background: Blue; width: 150px}
A shorter navigation bar will not go straight to the bottom, and it will end when the half-way content ends. What should I do?
Unfortunately, you can only use spoofing to add a background image to the shorter column. The width is the same as the column width, and the color is the same as the Set background color.
Body {Background: url(blue-image.gif) 0 0 repeat-y}
In this case, EM cannot be used as the unit, because in this case, once the reader changes the font size, this trick will reveal the filling, and only PX can be used.
18-way CSS skills (1)
Translation: Ajie
Original Author: Roger Johansson
Author's profile: He lives in godeburg, Sweden and began to engage in web design in 1994. 456 Berea Street is his address, so he uses this name as his personal homepage domain name.
Recently, some friends have asked me some CSS problems in my work. They are always unable to control CSS and affect the efficiency of CSS. I will analyze and summarize the error to help you make it easier to use CSS.
This article summarizes all my skills and compatibility solutions since I started using the CSS layout method. I would like to share this with you, I will focus on some mistakes that beginners may make (including those I have made myself). If you are already a CSS guru, you may already know these skills. If you have more skills, I hope I can help.
I. Use CSS abbreviations
Using abbreviations can help reduce the size of your CSS file and make it easier to read. For the main rules of CSS abbreviations, see common CSS abbreviations syntax summary, which is not described here.
Ii. Define the unit unless the value is 0
Unit that forgets to define the size is a common mistake for beginners of CSS. In HTML, you can write only width = "100", but in CSS, you must give an accurate unit, for example, width: 100px width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units.
Iii. Case Sensitive
When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case.
The values of class and ID are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.
4. Cancel the element limitation before class and ID
When you write an element to define a class or ID, you can omit the previous element limitation, because ID is unique in a page, and clas s can be used multiple times on the page. It makes no sense to limit an element. For example:
Div # Content {/* declarations */}
Fieldset. Details {/* declarations */}
Can be written
# Content {/* declarations */}
. Details {/* declarations */}
This saves some bytes.
5. Default Value
Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, You can first define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as shown in the following code:
*{
Margin: 0;
Padding: 0;
}
(This method proved to be bad)
6. Do not need to repeatedly define the value that can be inherited
In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. defined in the parent element, the child element can be inherited directly without repeated definitions. However, the browser may use some default values to overwrite your definition.
VII. Recent priority principle
If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code.
Update: lorem ipsum dolor set
In the CSS file, you have defined the element P and a class "Update"
P {
Margin: 1em 0;
Font-size: 1em;
Color: #333;
}
. Update {
Font-weight: bold;
Color: #600;
}
In these two definitions, class = "Update" will be used because the class is closer to P. For more information, see W3C calculating a selector's specificity.
8. multi-class definition
A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is #666, and the second style has a border of 10 PX.
. One {width: 200px; Background: #666 ;}
. Two {border: 10px solid # f00 ;}
In the Page code, we can call
<Div class = "One Two"> </div>
In this way, the final display effect is that the DIV has both a background of #666 and a border of 10 PX. Yes. You can try it.

18-way CSS skills (2)
9. Use the sub-selector (descendant selectors)
CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. The sub-selector can help you save a lot of class definitions. Let's look at the following code:
<Div id = "subnav">
<Ul>
<Li class = "subnavitem"> <a href = "#" class = "subnavitem"> Item 1 </a> </LI>
<Li class = "subnavitemselected"> <a href = "#" class = "subnavitemselected"> Item 1 </a> </LI>
<Li class = "subnavitem"> <a href = "#" class = "subnavitem"> Item 1 </a> </LI>
</Ul>
</Div>
The CSS definition of this Code is:
Div # subnav ul {/* some styling */}
Div # subnav ul Li. subnavitem {/* some styling */}
Div # subnav ul Li. subnavitem A. subnavitem {/* some styling */}
Div # subnav ul Li. subnavitemselected {/* some styling */}
Div # subnav ul Li. subnavitemselected A. subnavitemselected {/* some styling */}
You can use the following method to replace the above Code
<Ul id = "subnav">
<Li> <a href = "#"> Item 1 </a> </LI>
<Li class = "Sel"> <a href = "#"> Item 1 </a> </LI>
<Li> <a href = "#"> Item 1 </a> </LI>
</Ul>
The style definition is:
# Subnav {/* some styling */}
# Subnav Li {/* some styling */}
# Subnav A {/* some styling */}
# Subnav. Sel {/* some styling */}
# Subnav. Sel A {/* some styling */}
Using a sub-selector can make your code and CSS more concise and easier to read.
10. Do not quote the background image path
To reduce the number of bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. For example:
Background: URL ("images/***. GIF") #333;
Can be written
Background: URL (images/***. GIF) #333;
If you add quotation marks, some browser errors may occur.
11. Group selectors)
When some element types, classes, and IDs all have common attributes, you can use the group selector to avoid repeated definitions multiple times. This can save a lot of bytes.
For example, to define the font, color, and margin of all titles, you can write as follows:
H1, H2, H3, H4, H5, H6 {
Font-family: "lucida Grande", lucida, Arial, Helvetica, sans-serif;

Color: #333;
Margin: 1em 0;
}
If an independent style needs to be defined for some elements during use, you can add a new definition to overwrite the old one, for example:
H1 {font-size: 2em ;}
H2 {font-size: 1.6em ;}

18-way CSS skills (3)
12. Specify the link style in the correct order
When you use CSS to define multiple state styles of links, pay attention to the order in which they are written. The correct order is: Link: visited: hover: active. The first letter is "lvha". You can remember it as "love hate" (dislike ). For more information about this definition, see link specificity by Eric Meyer.
If your user needs to use a keyboard to control the focus of the current link, you can also define the focus attribute. : The effect of the Focus attribute depends on the position you write. If you want the focus element to display the hover effect, you can write the focus before the hover. If you want the focus effect to replace: for hover effect, you can put: Focus behind: hover.
13. Clear floating
A very common CSS problem is that when floating is used, the lower layer is overwritten by the floating layer, or the nested child layer in the layer is out of the outer range.
The general solution is to add an additional element after the floating layer, such as a div or a Br, and define its style as clear: Both. This method is far-fetched. Fortunately, there is another good solution. Please refer to this article. Article How to clear floats without structural markup (Note: This article will be translated as soon as possible ).
The above two methods can solve the problem of floating exceeding, but what if you really need to clear the objects in the layer or layer? A simple method is to use the overflow attribute. This method was originally published in simple clearing of floats and has been widely discussed in clearance and super simple clearing floats.
The above clear method is more suitable for you. It depends on the specific situation and will not be discussed here. In addition, some excellent articles on Float applications have been clearly stated. We recommend that you read: floatutorial, containing floats, and float layouts.
14. Center horizontally (centering)
This is a simple technique, but it is worth repeating it again, because I have seen many new users asking this question: how to center CSS horizontally? You need to define the element width and the horizontal margin. If your layout is contained in a layer (container), it is like this:
You can define it to center horizontally as follows:
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
}
However, ie5/win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute. Like this:
Body {
Text-align: center;
}
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
Text-align: left;
}
Text-align: center of the first body. The rule defines that all the elements of the body in ie5/win are centered (other browsers only center the text), and the second text-align: left; is to place the text in # warp to the left.

18-way CSS skills (4)
15. import and hide CSS
because older Browsers Do not support CSS, a common practice is to use the @ import technique to hide CSS. For example:
@ import URL ("main.css");
however, this method does not work for ie4, which makes me a headache for a while. Later, I used the following method:
@ import "main.css";
in this way, CSS can be hidden in ie4, which saves 5 bytes. For more information about the @ import syntax, see centricle's CSS Filter chart
16. optimization for IE
sometimes, you need to define special rules for IE browser bugs. Here there are too many CSS skills (Hacks ), I only use two of these methods. No matter whether Microsoft is better able to support CSS in the upcoming IE7 beta version, these two methods are the safest.
1. annotation method
(a) hide a CSS definition in IE. You can use the child selector ):
HTML> body P {
/* definition content */
}< br> (B) the following code can only be understood by IE (hidden from other browsers)
* html p {
/* declarations */
}< br> (c) sometimes you want IE/win to be effective While IE/MAC is hidden. You can use the "backslash" technique:
/* \ */
* html p {
declarations
}< br>/**/
2. conditional comments (conditional comments) method
another method, I think, is better than csshacks, is to use Microsoft's conditional comments ). With this method, you can define some styles for IE without affecting the definition of the main style table. Like this:

18-way CSS skills (5)
17. debugging skills: How big is the layer?
When a CSS debugging error occurs, you need to analyze the CSS code line by line like a typographical engineer. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space. Some people suggest using border, which is acceptable in general, but the problem is that sometimes border will increase the element size. Border-top and boeder-bottom will destroy the vertical margin value, therefore, it is safer to use background.
Another frequently problematic attribute is outline. Outline looks like a boeder, but does not affect the size or position of the element. Only a few browsers support the outline attribute. All I know is safari, omniweb, and opera.

18. CSS Code Writing Style
When writing CSS Code, everyone has the habit of writing indentation, broken lines, and spaces. After continuous practice, I decided to adopt the following writing style:
Selector1,
Selector2 {
Property: value;
}
When using the Union definition, I usually write a single row for each selector so that they can be found in the CSS file. Add a space between the last selector and braces {, and each definition also writes a line separately. The semicolon directly adds no space after the attribute value.
I used to add points after each attribute value. Although the rule allows the last attribute value to be followed by a semicolon, if you want to add a new style, it is easy to forget to add a semicolon to generate an error, therefore, it is better to add both.
Finally, close braces} write a single row.
Spaces and line breaks help and read.