<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh">
<Head profile = "http://www.w3.org/2000/08/w3c-synd/#">
<Meta http-equiv = "content-language" content = "zh-cn"/>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> blueidea </title>
<Style type = "text/css">
A: link {
Color: red;
}
A: hover {
Color: blue;
}
A: visited {
Color: green;
}
A: active {
Color: orange;
}
</Style>
</Head>
<Body>
<A href = "#" mce_href = "#">
Web standards FAQs daquan web standards FAQ Daquan web standards FAQs
</A>
</Body>
</Html>
Solution: Click to access the hyperlink style is not with hover and active, many people should have encountered this problem, the solution is to change the CSS attribute order: L-V-H-A;
2. Double margin BUG of IE6
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh">
<Head profile = "http://www.w3.org/2000/08/w3c-synd/#">
<Meta http-equiv = "content-language" content = "zh-cn"/>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> blueidea </title>
<Style type = "text/css">
Body {
Margin: 0
}
Div {
Float: left;
Margin-left: 10px;
Width: 200px;
Height: 200px;
Border: 1px solid red
}
</Style>
</Head>
<Body>
<Div>
<A href = "#" mce_href = "#">
Web standards FAQs daquan web standards FAQ Daquan web standards FAQs
</A>
</Div>
</Body>
</Html>
Solution: After floating, the original margin is 10px, but IE is interpreted as 20px. The solution is to add the display: inline
6. How to vertically center text
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh">
<Head profile = "http://www.w3.org/2000/08/w3c-synd/#">
<Meta http-equiv = "content-language" content = "zh-cn"/>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> blueidea </title>
<Style type = "text/css">
Div {
Height: 30px;
Line-height: 30px;
Border: 1px solid red
}
</Style>
</Head>
<Body>
<Div> web Standard FAQ </div>
</Body>
</Html>
Solution: Set a line height for the container with the same height.
8. why can't the FF text support the height of the container?
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh">
<Head profile = "http://www.w3.org/2000/08/w3c-synd/#">
<Meta http-equiv = "content-language" content = "zh-cn"/>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> blueidea </title>
<Style type = "text/css">
Div {
Width: 200px;
Height: 200px;
Border: 1px solid red
}
</Style>
</Head>
<Body>
<Div> web Standard FAQs standard common web standard FAQs web Standard FAQs web Standard FAQs standard FAQs web Standard FAQs FAQs web standards FAQs daquan web Standard FAQ </div>
</Body>
</Html>
Solution: Containers with fixed height values in standard browsers won't be opened as in IE6, so I want to fix the height and how can I set it to be supported? The method is to remove the min-height: 200px setting for height. Here, we can define this to take care of IE6 that does not know min-height:
{
Height: auto! Important;
Height: 200px;
Min-height: 200px;
}
6. Minimum page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:
Then CSS is designed like this:
# Container {
Min-width: 600px;
Width: expression (document. body. clientWidth <600? "600px": "auto ");
}
The first min-width is normal, but the width of line 2nd uses Javascript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through Javascript judgment.
1. css style for firefox ie6 ie7
Most of them are used now! Important is compatible. It can be displayed normally for ie6 and firefox tests, but ie7 is compatible! Important can be correctly explained, and the page will not be displayed as required! If you find a good compatibility Method for IE7, you can use "* + html". Now you can use IE7 to browse it. It should be okay. Now you can write a CSS file like this:
#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* IE */
The font color in firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.
2. center problem in css layout
The main style definition is as follows:
Body {TEXT-ALIGN: center ;}
# Center {MARGIN-RIGHT: auto; MARGIN-LEFT: auto ;}
Note:
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.
However, it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto; MARGIN-LEFT: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one DIV. You can split multiple divs in sequence, you only need to define MARGIN-RIGHT: auto; MARGIN-LEFT: auto; in each split div.
Nesting order of div ul li
Only one rule is described today. Is the triangular relationship between <div> <ul> <li>. In my experience, <div> is on the outermost side, which is <ul>, and then <li>. Of course, <li> can be nested in <div> or something, but it is not recommended that you nest many things. When you comply with such rules, the bad and disobedient gaps will not appear in it. When you just put <div> in <li>, if you do not use <ul>, you will find that the gap is very difficult to control. In general, IE6 and IE7 will be separated by thin air. But in many cases, when you come to the next line, the gap will be gone, but the previous content is blank. In this case, although you can change IE's Margin, then adjust the Padding under Firefox to make the two display very similar, but your CSS will become very smelly, you have to consider more remedial measures that may cause such problems. Although you know that they are compatible with each other, you will be bored.
Nesting
Follow the above Nesting Method, <div> <ul> <li> </ul> </div>, and then tell ul {Margin: 0px in CSS; padding: 0px; list-style: none, this is because IE and Firefox have different default effects. Therefore, you do not need to do anything in this way. There is almost no difference between your IE6, IE7, and Firefox (the outer distance, distance, height, and width, maybe you will find the difference between one and two pixels at a certain time, but it is very beautiful. You don't need to adjust the CSS Of a large part to control their display, you are willing to, you can only be compatible with one or two places, and usually this compatibility can adapt to various places, without repeating in different places to debug different compatible methods-ease your troubles. You can use ul. class1, ul. class2, ul. class3 {xxx: xxxx} to easily sort out the areas you want to be compatible. Try it out and never nest it out again. Although you can almost think about how to nest it in Div + CSS mode, you will be much easier according to the above rules, to get twice the result!
If many things in Css do not follow certain rules, it will upset you, although you can use a lot of compatibility, a lot! Important to control it, but you will find that in the long run you will be reluctant to look at many excellent websites, their CSS let IE6, Ie7, Firefox, and even Safari, is Opera perfect when it starts to run? However, they seem to be less compatible with complex templates. In fact, you need to know that IE and Firefox are not so incompatible. We can find a way to make them coexist harmoniously. Don't think that you have discovered a compatible method, and you have mastered everything. We are not compatible slaves.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
