Home >Web Front-end >HTML Tutorial >DIV CSS design IE6/IE7/FF compatibility problem solving article_html/css_WEB-ITnose
DIV CSS design IE6/IE7/FF compatibility problem solving article_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:02858browse
When designing a website, you should pay attention to the compatibility of CSS styles with different browsers. Especially for websites designed entirely using DIV CSS, you should pay more attention to the compatibility of IE6 IE7 FF with CSS styles, otherwise , your network chaos may cause unwanted effects! p对象中的内容
Common to all browsers
height: 100px;
IE6 only
_height: 100px; 100px;
Shared by IE7 and FF
height: 100px !important;
1. CSS compatibility
The following two methods can solve almost all compatibility issues today.
1, !important (not very recommended) , it feels safest to use the following one)
With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)
Code:
2, IE6/IE77 for FireFox
* html and *html are IE-specific tags, which are not supported by firefox. And * html is a IE7-specific tag.
Code:
< style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
* html #wrapper { width: 60px;}
Note:
* To be compatible with IE7, html must have the following statement at the top of the HTML:
Code:
2. Universal float closure (very important!) You can use this to solve the problem of incorrect spacing when aligning multiple divs.
About clear The principle of float can be found in [How To Clear Floats Without Structural Markup]
Add the following code to Global CSS, and add class="clearfix" to the div that needs to be closed. It works repeatedly.
Code:
3. Other compatibility tips ( Quite useful)
1. Setting padding on a div under FF will cause the width and height to increase, but IE will not. (can be solved with !important)
2. Centering problem.
1). Vertically centered. Set line-height to the same height as the current div, and then pass vetical-align: middle. (Be careful not to wrap the content.)
2). Horizontally center. margin: 0 auto; (Of course it is not omnipotent)
3 , if you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags)
4. The difference in understanding of BOX between FF and IE leads to a 2px difference in divs set to float in IE. Problems such as doubling margins.
5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid unnecessary trouble. (Common in navigation tags and content lists)
6 , the div as the external wrapper should not have a fixed height. It is best to add overflow: hidden to achieve height adaptation.
7. Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:
Compatible code: Compatible with the most recommended modes.
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
*html .submitbutton {
margin-top: 21px;
}
* html .submitbutton {
margin-top: 21px;
}
What is browser compatibility: When we use different browsers (Firefox IE7 IE6) to access the same website or page, there will be some incompatibility problems. Some display normally and some display abnormally. When we write CSS, we will I'm very annoyed. I just fixed the problem in this browser, but another browser has a new problem. Compatibility is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!
The compatibility of the IE7 browser recently released by Microsoft has indeed placed a heavy burden on some web page producers. Although IE7 has become standardized, it still has many differences from FF, so the compatibility of IE7 needs to be used. Many friends have asked what the compatibility of IE7 is, but I actually don’t know. I haven't found any compatibility specifically for IE7 yet. In addition to the previous article, the compatibility method in "CSS Style for Firefox IE6 IE7" is also very useful.
Anyone with a little bit of logical thinking will know that you can use the compatibility of IE and FF together. Here are three compatibility options, for example: (Suitable for novices, haha, experts will stop by here.)
Program code
The first one is compatible, common to all IE FF browsers (in fact, it is not compatible)
height:100px;
The second one is compatible with IE6 only
_height:100px;
The third one is compatible IE6 IE7 common
*height:100px;
Now that we have introduced these three compatibility, let’s take a look at how to define IE6 IE7 FF-specific compatibility for an attribute in a style respectively. Look at the code below and the order. It can’t be wrong:
Program code
height:100px;
*height:120px;
_height:150px;
Let me briefly explain how each browser understands these three attributes:
Under FF, FF does not recognize the second and third attributes, so it reads What is height:100px;
Under IE7, IE7 does not recognize the third attribute, so it reads the first and second attributes, and because the second attribute covers the first attribute, IE7 finally reads It is the second attribute *height:120px;
Under IE6, IE6 recognizes all three attributes, so all three attributes can be read. And because the third attribute overwrites the first two attributes, IE6 finally reads The third attribute is taken.
1 CSS styles for firefox ie6 ie7
Now most of them are compatible with !important. For ie6 and firefox tests, they can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required. ! I found a good compatibility method for IE7 by using "* html". Now use IE7 to browse it. There should be no problem. Now write a CSS like this:
#1 { color: #333; }
* html # 1 { color: #666; }
* html #1 { color: #999; }
Then the font color is displayed as #333 under firefox, #666 under IE6, and font color is displayed under IE7 for #999.
2 Centering issues 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.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "
when setting the child element. It should be noted that if you want to use this method to center the entire page, it is not recommended. Set in a DIV, you can split out multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.
3 different interpretations of the box model.
#box{
width:600px;
//for ie6.0- width:500px;
//for ff ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff ie6.0
width :500px;
// for ie6.0-
}
4 Double distance generated by floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will Generate a distance of 200px display:inline; //Ignore float}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: always start on a new line, height, width, line height, side The distance can be controlled (block elements); the characteristics of Inline elements are: on the same line as other elements,... cannot be controlled (inline elements);
#box{ display:block; //Can be simulated for inline elements For block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;
5 Problems with IE and width and height
IE does not recognize the definition of min-, but in fact it changes the normal width Use height and height as if there is min. This is a big problem. If you only use width and height, these two values will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, this width is more important. To solve this problem, you can do this:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 Minimum width of the page
min-width is a very convenient CSS command. It can specify that the minimum width of an element cannot be smaller than a certain width, so that the layout can always be correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a
Then design the CSS like this:
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
The first min-width is normal ; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.
7 Clear floats
. Compatible with box{
display:table;
//Display the object as a block element-level table
}
or
. Compatible with box{
clear:both;
}
Or add: after (pseudo object) to set the content that occurs after the object. It is usually used in conjunction with content. IE does not support this pseudo object and is not supported by Ie browsers, so It does not affect IE/WIN browsers. The most troublesome thing about this is
…#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility : hidden;
}
8 DIV floating IE text produces a 3-pixel bug
The object on the left is floating, and the right is positioned using the left margin of the outer patch. The text in the right object will be 3px away from the left. .
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//This sentence is the key
}
HTML code
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
Solution Method: Add 2 empty div objects above and below the P object. CSS code: .1{height:0px;overflow:hidden;} or add the border attribute to the DIV.
Block IE browser (that is, it will not be displayed in IE)
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
Here select is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.
Only recognized by IE7
* html {…}
You can use this compatibility when you need to make styles only for IE7.
Recognized by IE6 and below
* html {…}
Pay special attention to this place. Many landlords have written that it is compatible with IE6. In fact, IE5.x can also recognize this compatibility. Other browsers do not recognize it.
html >body select {……}
This sentence has the same effect as the previous sentence.
Only IE6 does not recognize it.
select { display :none;}
The main purpose here is to separate an attribute and value through CSS comments, which are released before the colon.
Only IE6 and IE5 do not recognize it
select { display :none;}
The difference here from the above sentence is that there is an additional CSS comment between the selector and the curly braces.
Only IE5 does not recognize
select { display:none;}
This sentence is the comment in the attribute area removed from the previous sentence. Only IE5 does not recognize the
box model solution
selct {width:IE5.x width; voice-family :""}""; voice-family:inherit; width:correct width;}
box model The clearing method is not handled through !important. This needs to be clear.
Clear floats
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all floats, Then the height of the parent cannot completely cover the entire child. Then use this clear floating compatibility to define the parent once, then this problem can be solved.
Truncation ellipsis
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
This will be truncated automatically after exceeding the length It is a good technique to add extra text and end it with an ellipsis. It's just that Firefox doesn't support it currently.
Only Opera recognized
@media all and (min-width: 0px){ select {……} }
Make separate settings for Opera browser.
The above are some compatibility in writing CSS. It is recommended to follow the correct tag nesting (div ul li nested structural relationship). This can reduce the frequency of using compatibility and avoid misunderstandings. It is not required for just one page. A lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without using any compatibility. These are used to solve local compatibility problems. If you want to separate the compatibility content, Come out and try some of the filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import required patch styles through conditions.
IE5.x filter, only IE5.x is visible
@media tty {
i{content:"";}} @import 'ie5win.css';
IE5/MAC filter
The following is the conditional comment of IE. I personally think that using conditional comments to call the corresponding compatibility is a perfect solution for multi-browser compatibility. Put the parts that need to be compatible into a separate file. When the browser version is consistent, you can call the compatible style. This is not only very convenient to use, but also allows for more strict observation of the CSS itself. Is it necessary to use compatibility? In many cases, when I write CSS, if I write all the code including compatibility into a CSS file, it will be very casual. I can make it as compatible as I want. But when you write it independently, You will unconsciously consider whether it is necessary to be compatible. Should it be compatible with CSS first? Or should we first adjust the things in the main CSS to be as non-compatible as possible? When you make many browsers very obedient with only a small amount of compatibility, do you feel a sense of accomplishment? You know how to choose, right~~ Haha
IE’s if condition is compatible and you can use it flexibly. Please refer to this IE condition note
Only IE
All IE can recognize it
Only IE5.0 can recognize it
Only IE 5.0
IE5.0 can be recognized by IE5.5
Only IE6 can be recognized
Only IE 7/-
IE6 and IE5.x below IE6 can be recognized
Only IE 7/-
Only IE7 can recognize it
If there are many things in Css that do not follow certain rules, it will make you very upset, although you can do it through a lot of compatibility and a lot of !important Control it, but you will find that you will be unwilling to do so in the long run. Look at many excellent websites. Their CSS makes IE6, Ie7, Firefox, and even Safari and Opera run perfectly. Are you envious? And their seemingly complex templates use very little compatibility. In fact, you have to know that IE and Firefox are not so disharmonious. We can find a certain method to make them coexist harmoniously. Don't think that if you find a compatible method, you have mastered everything. We are not slaves to compatibility.
The nesting order of div ul li
Today I will only talk about one rule. It is the triangular relationship of inside, and then
, you You will find that your gap is very difficult to control. Under normal circumstances, IE6 and IE7 will have more gaps out of thin air. But in many cases, when you go to the next line, the gap disappears, but the previous content is empty. In this case, you can change the Margin of IE, and then adjust the Padding under Firefox so that the two can be displayed. The effect is very similar, but your CSS will become extremely stinky, and you will have to think more about possible remedies for this problem. Although you know that you will be compatible with them all, you will be annoyed to death.
Specific nesting writing method
Follow the above nesting method, < /div> and then tell ul in CSS {Margin:0px;Padding:0px;list-style.:none;}, where list-style.:none is to prevent the