My microblog was created a few days ago. Although I knew this place long ago, I was afraid that I could not insist on writing something that I had never created. Over the past few days, I made this decision to build my blog and send it weekly. I have heard of some front-end knowledge or cutting-edge technologies.
Also, I am a front-end hacker, so I should ignore me so that I don't want to say that my class is an axe. I just want to write something or record something that may also help some newer beginners grow together. ^_^!
Okay, you don't need to talk nonsense. As we all know, IE6 ............ (Sorry, let me get sick first ....) with the popularity of advanced browsers, not only are front-end developers, but even their parents "Big Microsoft" can't wish him to perish earlier. But this is not the responsibility of ie6. This is the inevitable result of the development of the times. many of our elders have feelings for Internet Explorer 6. It is said that ie6 will officially launch a stage of history in the middle of next year. Many large websites have already declared that they are no longer compatible with IE6. In addition, ie6 has a share of less than 1% in the United States, but it still has a high Internet presence in China. ie6 won't disappear so quickly because the vast majority of people in China are using pirated microsoft, as long as they use it to access some of their frequently used websites, such as baidu and taobao !) Then people will not take the time to create a new one. Therefore, if you want to implement front-end css, you must understand some of its Common Bugs.
1. Three-pixel BUG generation conditions and Solutions of IE6
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> IE6 3 pixel bug </title>
<Style type = "text/css">
# SideBar {
Width: 100px;
Height: 100px;
Background: #6bee68;
Float: left;
}
# Content {
Width: 200px;
Height: 100px;
Background: #56bcf3;
}
</Style>
</Head>
<Body>
<Div id = "sideBar"> sideBar </div>
<Div id = "content"> content </div>
</Body>
</Html>
Solution: you only need to add a floating value to the content.
2. Question about doubling margin
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">
The corresponding css is
# Imfloat {float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}
3. IE6 text overflow bug (uncommon)
[Html] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title>IE6 text overflow bug</Title>
</Head>
<Body>
<Div style = "width: 400px">
<Divstyle = "float: left"> </div>
<! -->
<Divstyle = "float: right; width: 400px"> Fill, which is the extra word </div>
</Div>
</Body>
</Html> [/html]
After testing, only IE6 has a text overflow bug, and ie7 8 Firefox is normal. In ie6, the system displays 'token, which is the extra word '.
Floating
Remove "float: left;" from <divstyle = "float: left"> </div>. You will find that the extra "word" is missing and the page is displayed normally. Remove "float: right;" in <divstyle = "float: right; width: 400px">, and the extra "word" disappears. The page is displayed normally.
It is related to the location where the comment "<---->" is located.
Move the comment to the front of <divstyle = "float: left"> </div>. The excess "" word disappears and the page is displayed normally. Move the annotation to the <divstyle = "float: right; width: 400px"> comment, which is the word that is exclusive </div>, and the extra word also disappears, the page is displayed normally.
Related to fixed widthRemove "width: 400px" in <divstyle = "float: right; width: 400px">. The unused "word" disappears and the page is displayed normally.
Overflow is related to the number of comments
Number of comments added: when one comment is added, one word is added; when two comments are added, three more words are added; when three annotations are added, five more words ...... We will obtain the formula from the above rule: the number of words in the overflow text = the number of comments * 2-1. The words here are valid in Chinese or English numbers. When the overflow is greater than the number of words in the text, the text block disappears.
Solution:A. Do not place comments. The simplest and quickest solution B. do not place comments between two floating blocks. include text blocks in new ones, such as <divstyle = "float: right; width: 400px "> <div> then this is the extra word </div> d. remove the fixed width of the text block, which is similar to 3. 4. Internet Explorer
# Container {min-width: 600px; width: expression (document. body. clientWidth <600? "600px": "auto ");}
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
