In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article shows you how to explore DIV+CSS compatible with IE6, IE7, Firefox methods, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.
We will focus on the compatibility of DIV+CSS with IE6, IE7, Firefox methods, and the following methods for compatibility issues in different browsers and different versions of browsers, such as @ import, comments, property selectors, sub-object selectors and voice-family methods.
Research on the compatibility of DIV+CSS with IE6, IE7 and Firefox
The most common way to distinguish between Firefox and IE is the! important method. For other browsers and different versions of the browser, there are some other methods, such as @ import, comments, property selectors, sub-object selectors and voice-family, which are described in the CSS site layout record.
◆ below is the CSS compatibility issue between IE and Firefox
1.DOCTYPE affects CSS processing
2.Firefox:DIV is already in the middle when setting margin-left,margin-right to auto. IE is not allowed.
When 3.Firefox:body sets text-align, DIV needs to set margin:auto (mainly margin-left,margin-right) to center.
4.Firefox: after setting padding, DIV will add height and width, but IE will not, so you need to use! important set up an extra height and width
5.Firefox: yes! important,IE ignores it, available! important specially sets the style for Firefox. It is worth noting that the sentence xxxxxexamples should be placed on top of another sentence.
Vertical centering of 6.DIV: vertical-align:middle; increases the line spacing to the same height as the entire DIV line-height:200px; and then inserts text, which is centered vertically. The disadvantage is to control the content and not to change the line.
7.cursor:pointer can display the cursor finger shape in IEFirefox at the same time, hand only IE can
8.Firefox: link with a border and background color. You need to set display:block and float:left to ensure no line wrapping. With reference to menubar, the height of an and menubar is set to avoid misalignment of the bottom edge. if you do not set height, you can insert a space in the menubar.
9. Inconsistent interpretation of the BOX model in mozillafirefox and IE leads to a difference in 2px solution: DIV {marginal Vega 30px importante marginal Vega 28px;}
Note that the order of the two margin must not be reversed, according to Ajie! the attribute important IE is not recognized, but other browsers can. So under IE, it is actually interpreted as follows: DIV {maring:30px;margin:28px}
Repeat the definition according to * one, so you can't just write margin _
The BOX interpretation of 10.IE5 and IE6 is inconsistent.
DIV {width:300px;margin:010px010px;} under IE5
The width of DIV is interpreted as 300px-10px (right fill)-10px (left fill) the width of the final DIV is 280px, while on IE6 and other browsers the width is calculated as 300px+10px (right fill) + 10px (left fill) = 320px. At this time, we can make the following modifications: DIV {widthva300pxThe importantwitch widthUniplex 340pxTrachever 010px010px}
I don't quite understand what this / * / is, except that both IE5 and firefox support it but IE6 doesn't. If anyone understands, please let me know, thank you! :)
11.ul tags have a padding value by default in Mozilla, while only margin has a value in IE, so defining ul {margin:0;padding:0;} first solves most of the problems.
◆ considerations:
1. The DIV of float must be closed.
For example: (where the properties of floatA and floatB have been set to
Float:left;)
The NOTfloatC here doesn't want to continue panning, but wants to move down.
There is no problem with this code in IE, the problem lies in Firefox. The reason is that NOTfloatC is not a float tag and the float tag must be closed.
In
Add between
This DIV must pay attention to the declaration position, must be placed in the most appropriate place, and must be of the same level with two DIV with float attributes, and there must be no nesting relationship between them, otherwise an exception will be generated.
And define the style of clear as follows
: .clear {clear:both;}
In addition, in order for the height to adapt automatically, add overflow:hidden to the wrapper
When the box of float is included, the highly automatic adaptation is invalid under IE, so the layout private attribute of IE should be triggered (evil IE!) This can be done with zoom:1;, so compatibility is achieved.
For example, a wrapper is defined as follows
: .colwrapper {overflow:hidden; zoom:1; margin:5pxauto;}
2. The problem of doubling margin.
DIV set to float doubles the margin set under IE. This is a bug where all IE6 exists.
The solution is to add display:inline to the DIV
For example:
The corresponding CSS is # IamFloat {float:left; margin:5px;/*IE is understood as 10px*/ display:inline;/*IE and then 5px*/}
3. On the containment relationship of containers
In many cases, especially when there is a parallel layout in the container, such as two or three float DIV, the width is prone to problems. In IE, the width of the outer layer is crushed by the wider DIV of the inner layer. Be sure to use Photoshop or Firework for pixel-level accuracy.
4. The question of height
If you are adding content dynamically, do not define the height. The browser can automatically scale, but if it is static content, the height is set. (it seems that sometimes it doesn't automatically push down. I don't know exactly what's going on.)
5, the most ruthless means -! important
If there is really no way to solve some of the details, you can use this method. Firefox automatically parses "! important" first, but IE ignores it. As follows
.tabd1 {background:url (/ res/images/up/tab1.gif) Nomuri repeat0px0pximportantancerStylefor Firefox / background:url (/ res/images/up/tab1.gif) no-repeat1px0px;/*StyleforIE*/}
It is worth noting that the sentence "xxxxxtimes" must be placed on top of another sentence, which has been mentioned above.
IE7.0 has come out, and there are new problems with support for CSS. With more browsers and worse web compatibility, we are still on the run. In order to solve the compatibility problem of IE7.0, we have found the following article:
Now I mostly use! important to hack, for IE6 and firefox tests can be displayed normally, but IE7 to! important can be explained correctly, will cause the page not to display as required! After a search, I found a good hack way for IE7 is to use "* + html". Now browse it with IE7, and there should be no problem.
Now you can write a CSS like this:
# example {color:#333;} / * Moz*/ * html#example {color:#666;} / * IE6*/ * + html#example {color:#999;} / * IE7*/
Then the font color is displayed as # 333 under firefox, the font color is displayed as # 666 under IE6, and the font color is displayed as # 999 under IE7. They do not interfere with each other. I really hope that rubbish IE6 retires soon.
◆ DIV+CSS three-row and three-column layout (compatible with various browsers)
DIV layout Test DIV {height:150px;} DIV.left {width:20%; float:left; clear:right; background-color:#eeeeee;} DIV.center {width:50%; float:left; clear:right; background-color:#CCCCCC;} DIV.right {width:30%; float:left; clear:right; background-color:#808080;} DIV.both {width:100%; clear:both Background-color:#696969;} left middle right full line left middle right is how to explore how DIV+CSS is compatible with IE6, IE7, Firefox methods, have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.