Home > Industries > Internet
IE has always been criticized by advocates of web standards. When Firefox was born, more web page makers began to pay attention to Web standard design. Microsoft finally launched ie7. However, can IE7 really turn the storm, be it truly trusted by users, and be truly recognized by web designers?
Read the articles in the internet standard of IE7 series and witness the change of Internet Explorer 7 with you!
You come to me!In the previous article, we once mentioned this bug, which is famous for its strange phenomenon. Although Today is July 22, April 1, these are all true. In order for everyone to remember this strange bug, I will change the way of writing in the past. Instead, I will first show you the phenomenon. For better results, I used the flash recording method this time and click this icon.You can see the flash image. If your browser does not support flash playback, please download the Flash file directly and use other software to view the file. Sorry for the inconvenience.
If you only watch the film above, you may feel a bit confused. What is this? Isn't it an ordinary webpage with no words. But when you see the source code of this webpage, you may be surprised --
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta name =" keywords "content =" Yes! B/S !, Web standards, Yang Zhengyi, blog Park, instance code "/> <br/> <meta name =" Description "content =" this is a simple yes! B/S! Article Example page, blog from Yang zhengtao, http://justinyoung.cnblogs.com/"/> <br/> <title> yes! B/S! Article Example page </title> <br/> <style type = "text/CSS"> <br/> # holder {<br/> background-color: pink; /*** an important factor that causes a bug. One explanation is that the lost texts are hidden in the background. ***/<br/>/*** width: 100%; you can set the width, relative width, and absolute width of the maximum container to correct the bug ***/<br/>}< br/> # holder: hover {<br/> background-color: deeppink;/*** can be removed to enhance the visual effect. * **/<Br/>}< br/> # floater {<br/> float: right; /*** important cause of the Bug ***/<br/> width: 135px; <br/> Height: 310px;/*** important cause of the bug, the height must be greater than the height of the text ***/<br/> border: 1px solid green; <br/>}< br/>. clear {<br/> clear: both; /*** important cause of the Bug ***/<br/>}< br/> # footer {/*** can be removed to enhance the visual effect. * **/<Br/> Height: 50px; <br/> border-top: 1px solid blue; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Holder"> <br/> <Div id = "floater"> <br/> I'm floater! <Br/> <a href = "#" Title = ""> </a> <br/> </div> <! -- End: floater --> <br/> <Div id = "ghostholder"> <br/> This example is used to demonstrate IE6's "hidden bug ", if you use IE6 to browse this page, you will find that you cannot see these words ~. <Br //> <br/> IE7 has fixed this bug, so you can see the text when you use IE7 to browse this page. <Br //> <br/> This example Page is from Yang Zhengyi's blog <a target = "_ blank" href = "http://justinyoung.cnblogs.com/" Title = "Web standard recommendation blog"> [Yes! B/S !] </A>, is <a target = "_ blank" href = "http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html" Title = "IE7 web standards"> IE7 web standards </a> an article in the series, this series of articles is still being serialized. The following is a list of published articles -- <br/> <ul style = "list-style-type: disc "> <br/> <li> <a Title =" IE7 web standards-1: preface "href =" http://www.cnblogs.com/JustinYoung/archive/2008/02/18/IE7_wsRoad_foreword.html "target =" _ blank "> IE7 web standards-1: Preface (and directory) </a> </ LI> <br/> <li> <a Title = "IE7 web standards-2 (Improvement) richer CSS selector "href =" http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_selector.html "target =" _ blank "> IE7 web standards-2 :( improved) richer CSS selector </a> </LI> <br/> <li> <a Title = "IE7 web standard-3: (corrected) marketing "href =" http://www.cnblogs.com/JustinYoung/archive/2008/02/20/IE7_wsRoad_overflow.html "target =" _ blank "> IE7 web standards-3: (corrected) page Layout disorder </a> </LI> <br/> <LI> <a Title = "IE7's web standards-4: (corrected) opera Phantom bug "href =" http://www.cnblogs.com/JustinYoung/archive/2008/03/03/IE7_wsRoad_dup_characters.html "target =" _ blank "> IE7 web standards-4: (corrected) opera Phantom bug </a> </LI> <br/> <li> <a Title = "IE7's Web Standard-5: (corrected! Finally, it went up! "Href =" http://www.cnblogs.com/JustinYoung/archive/2008/03/11/IE7_wsRoad_div_select.html "target =" _ blank "> IE7 web standards-5: (corrected) Up! Finally go up! </A> </LI> <br/> <li> <a Title = "IE7 web standard-6: (corrected) replacing element and line spacing bug "href =" http://www.cnblogs.com/JustinYoung/archive/2008/03/20/line-height-bug.html "target =" _ blank "> IE7 web standards-6: (corrected) replacement element and line spacing bug </a> </LI> <br/> <li> <a Title = "IE7 web standard-7: (corrected) float double margin bug "href =" http://www.cnblogs.com/JustinYoung/archive/2008/03/27/double-margin-float-bug.html "target =" _ blank "> IE7 web standards-7: (corrected) float double margin Bu G "</a> </LI> <br/> </ul> <br/> </div> <! -- End: ghostholder --> <br/> <Div class = "clear"> </div> <br/> <Div id = "footer"> <br/> I'm footer from <a target = "_ blank" href = "http://justinyoung.cnblogs.com/" Title = "Web standard recommendation blog"> [Yes! B/S !] </A> <br/> </div> <! -- End: Holder --> <br/> </body> <br/> </ptml> <br/>Tip: You can first modify the code in the text box and then run the cat and where to hide it?
Is it strange to check the source code? Where did all the text of a large film go? The answer is just as regrettable as it is in the past-there is no official explanation or explanation, and only a well-recognized answer is provided.
It is accepted that the background color of the DIV with the ID "# holder" is covered. As to why it was covered, no one could give you the answer except for the original IE6 development team. I agree that IE6 has a problem with the interpretation of Z-index. Whatever the cause, the results are indeed produced, which is indeed a bug in IE6. Fortunately, we can solve it.
How to find a cat?In fact, there are quite a few methods. if you carefully read the comments about CSS in the source code of the webpage, you can find some answers. Some solutions are listed here for your reference. If you have a better solution, please go to the [blog garden web standard design team] to enlighten me. Thank you first. Any of the following methods can be used to eliminate bugs --
The above method is only theoretical. Please use different methods as needed. In addition, this bug does not appear in Firefox, Safari, opera, and other browsers. Therefore, this article does not exist.
In other words: insert one sentence and one sentence about the series of articlesSome readers asked: "isn't this IE7 web standard? Why are there some bugs in IE6? What is the significance ?". In fact, the meaning is very simple. All the bugs mentioned in this series exist in IE6 and have been corrected in IE7. This is an improvement of IE7 over IE6, and a proof that IE7 is closer to the Web standard than IE6. At present, the Internet Explorer 6 market share is still very high, just when IE6, Internet Explorer 7, and Firefox are all over the world. Let's talk about the unique bugs of Internet Explorer 6 and provide solutions to make your webpage compatible with more browsers, how to Make Your webpage more robust is still helpful (at least I think so ^_^ ). It doesn't mean that the browser you use is IE7, or the browser of your friends around you is IE7, it means that everyone in the world is using IE7. As a Web page viewer, you do not care about these things, but as a bitter Web Page Maker, these things still play a role. It may be because I have not explained it clearly before, so I am sorry for the misunderstanding.
Series of articlesNow I am mainly maintaining two series: IE7 web standard road and a-web standard school. Among them, "IE7's web standards" is intended for friends who have a certain number of online page creation basics, while "a-web standards School" tends to be friends of beginners of web standards. To be more vivid and vivid, "a-web standard school" uses a video to explain (in fact, forcing yourself to exercise Mandarin is also an important reason RZ ~), I hope you can monitor my Mandarin in the video. I will try to keep these two series updated on a Monday ).
There are also three series: "New Features of Internet Explorer 8", "Everyone is here", and "Sharing Songs. Because the younger brother has limited time and energy, he can only update it occasionally when his work is relatively idle. Sorry only for those who follow the three series.
Related Article resource list
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
