Home >Web Front-end >HTML Tutorial >DIV CSS design features related to compatibility of IE6, IE7, and FF_html/css_WEB-ITnose

DIV CSS design features related to compatibility of IE6, IE7, and FF_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:29:54923browse

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!
Height common to all browsers: 100px;
IE6-specific_height: 100px;
IE6-specific*height: 100px;
IE7-specific* height: 100px;
IE7 and FF shared height: 100px !important;
1. CSS compatibility
The following two methods can solve almost all compatibility issues today.
1, !important (not very recommended, use the following one which feels safest)
Whatever 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:

< style >
#wrapper {
width : 100px!important ; /* IE7 FF */
width : 80px ; /* IE6 */
}

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 ; } /* FireFox */
*html #wrapper { width : 80px; } /* ie6 fixed */
* html #wrapper { width: 60px; } /* ie7 fixed, pay attention to the order */

Note:
* html is compatible with IE7 The following statement must be ensured 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 multiple divs are aligned.
For the principle of clear float, please refer to [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 every time.
Code:

< style >
/* Clear Fix */
.clearfix:after {
content : "." ;
display : block ;
height : 0 ;
clear : both ;
visibility : hidden ;
}
.clearfix {
display : inline-block ;
}
/* Hide from IE Mac */
.clearfix { display : block ; }
/ * End hide from IE Mac */
/* end of clearfix */

3. Other compatibility tips (quite useful)
1, given below by FF Setting padding on a div 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 centered. margin: 0 auto; (Of course it is not omnipotent)
3. If you need to add styles to the content in the a tag , 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 and problems such as the margin of a div set to float doubling under IE.
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. Do not set the height of the div as an external wrapper. Fortunately, overflow: hidden is added to achieve a high degree of adaptability.
7, Regarding the hand cursor. cursor: pointer. And hand is only applicable to IE. Paste the code:
Compatible code: Compatible with the most recommended mode.

< style >
/* FF */
.submitbutton {
float: left;
width: 40px;
height: 57px;
margin-top : 24px ;
margin-right : 12px ;
}
/* IE6 */
*html .submitbutton {
margin-top : 21px;
}
/* IE7 */
* 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 will display normally, and some will display normally. The display is not normal. We will be very annoyed when writing CSS. We just fixed the problem of 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. You 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 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, what IE7 finally reads is the second attribute *height:120px;
Under IE6, IE6 recognizes all three attributes, so all three attributes can be read. fetch, and because the third attribute overwrites the first two attributes, IE6 finally reads the third attribute.
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 browse it with IE7. There should be no problem. Now write a CSS like this:

< style >
#1 { color : #333 ; } /* Moz */
* html #1 { color : #666 ; } /* IE6 */
* html #1 { color : #999; } /* IE */

Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7.
2 Centering issues in css layout
The main style definitions are as follows:

< style >
body { TEXT-ALIGN : center ; }
#center { MARGIN-RIGHT : auto ; MARGIN-LEFT : auto ; }

Explanation:
First define TEXT-ALIGN: center in the parent element; this means Center the content within the parent element; this setting is sufficient for IE.
But it cannot be centered in mozilla. The solution is to add "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "
when setting the child element definition. It should be noted that if you want to use this method to center the entire page, it is recommended not to 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.

< style >
#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 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

iplay:table;

5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

< style >
#box { width : 80px ; height : 35px ; } html>body #box { width : auto ; height : auto ; min-width : 80px ; min-height : 35px ; }

6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类：
然后CSS这样设计：

< style >
#container {
min-width : 600px ;
width : e-xpression(document.body.clientWidth < 600? "600px": "auto" ) ;
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动
.兼容box{
display:table;
//将对象作为块元素级的表格显示
}
或者
.兼容box{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

< style >
#box {
float : left ;
width : 800px ; }
#left {
float : left ;
width : 50% ; }
#right {
width : 50% ;
}
*html #left {
margin-right : -3px ;
//这句是关键
}

HTML代码
< DIV id =box >
< DIV id =left >
< DIV id =right >

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 时。例：

p对象中的内容

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;} /*FF, OP visible*/
select:empty {font: 12px !important;} /*visible in safari*/
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.
IE6 and below recognition
* 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 /*IE6 does not recognize it*/:none;}
This is mainly 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 /*IE6, IE5 does not recognize*/: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 it
select/*IE5 does not recognize it*/ { display:none;}
This sentence removes the comment in the attribute area from the previous sentence. Only IE5 does not recognize

Box model solution
selct {width:IE5.x width; voice-family: ""}""; voice-family:inherit; width: correct width;}
The clearing method of the box model is not handled by !important. This needs to be clear.

Clear float
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are all When floating, the height of the parent cannot completely cover the entire child. Then use this clear floating compatibility to define the parent once, which can solve this problem.

Truncation ellipsis
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
This will automatically change after exceeding the length. It is a good technique to cut off the extra text and end it with an ellipsis. It's just that Firefox doesn't support it currently.

Only recognized by Opera
@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 structure relationship), which can reduce the frequency of using compatibility and avoid misunderstanding. It is not a The page needs a lot of compatibility to maintain multi-browser compatibility). In many cases, the browser may work very well without any compatibility. These are used to solve local compatibility problems. If you want to make the compatibility The content is also separated, so you might as well 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.

Filter for IE5.x, only IE5.x is visible
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css' ; /*";}
}/* */

IE5/MAC filter, generally not needed
/**//*/
@import "ie5mac.css ";
/**/

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 compatibility separately. In a file, when the browser version is consistent, the compatible style can be called. This is not only very convenient to use, but also for making the CSS itself, it can be more strictly observed whether it is necessary to use compatibility. In many cases Next, 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 independently, you will unconsciously consider whether If it is necessary to be compatible, should we first make it compatible with CSS? Or should we first adjust things in the main CSS so that they do not need to be compatible as much as possible? When you can make many browsers very obedient with only a small amount of compatibility, are you very careful? Do you have a sense of accomplishment? Do you know how to choose~~ 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 or IE5.5 can recognize it

Only IE6 can recognize it
Only IE 7/-
Recognized by IE6 and IE5.x below IE6
Only IE 7/-
Only IE7 can be recognized

There are many things in Css that will make you very upset if they do not follow certain rules. Although you can control it through a lot of compatibility and a lot of !important, you will find that you will be very unwilling in the long run. , take a 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

Only one rule will be discussed today. It is the triangular relationship of

. My experience is that
is on the outside, with
- . Of course,
  can be nested inside
- , but it is not recommended that you nest it. Pack a lot of stuff. When you comply with such rules, those unlucky, disobedient gaps will not appear inside. When you just put
- inside
  instead of
  - tag from displaying directory type tags such as dots or numbers. , because the default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. The difference in pixels, but that's already perfect. You don't need to adjust large CSS to control their display. If you like, you can only be compatible with one or two places, and usually this compatibility can be adapted to various places. There is no need for you to repeatedly debug different compatibility methods in different places - reducing your troubles. You can easily sort out the places you want to be compatible with using ul.class1, ul.class2, ul.class3 {xxx:xxxx}, and make them compatible. Give it a try and don’t nest randomly again. Although you can nest almost as much as you want with Div CSS, following the above rules will make it much easier for you and get twice the result with half the effort!
  Statement：
  The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What are the key points and tips for DIV CSS web page layout compatibility? _html/css_WEB-ITnoseNext article：What are the key points and tips for DIV CSS web page layout compatibility? _html/css_WEB-ITnose
Related articles
See more

DIV CSS design features related to compatibility of IE6, IE7, and FF_html/css_WEB-ITnose

Related articles