Compatible with IE6 IE7 FF FAQ under div css layout (reprinted)_html/css_WEB-ITnose

Divided css layout is compatible with IE6 IE7 FF FAQ collection
Common to all browsers (mainly used in the market is IE6 IE7 FF)
height: 100px;

For IE6 only
_height: 100px;

For IE6 only
*height: 100px; FF shared

height: 100px !important;

1. CSS compatibility
The following two methods can solve almost all compatibility problems today.

1, !important (not very recommended, use the following The safest feeling)

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 :

Note:
* To be compatible with IE7, the 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,

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:

3. Other compatible Tips (quite useful)

1. Setting padding on a div in 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 centered. 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; (commonly found in navigation tags)

4. The difference in understanding of BOX between FF and IE results in a 2px difference. Float divs have issues like margin 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. 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:
8. IE6 double margin BUG

After floating, the original margin is 10px, but IE interprets it as 20px. The solution is to add display:inline
9. Why can’t the text in FF expand the height of the container?
Containers with fixed height values ​​in standard browsers will not be stretched like in IE6. So if I want to have a fixed height and be stretched, what settings should I make? The way is to remove the height setting and set min-height:200px; In order to take care of IE6 that does not know min-height, it can be defined like this:
div { height:auto!important; height:200px; min-height:200px; }

Compatible code: Compatible with the most recommended modes.
/* 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, some differences will appear. Regarding compatibility issues, some are displayed normally and some are displayed abnormally. 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!

Program code

The first one is compatible with IE FF and is common to all browsers (it is not actually compatible)
height:100px;
The second one is compatible with IE6 Private
_height:100px;
The third one is compatible with IE6 IE7 Public
*height:100px;
height:100px;
*height:120px;
_height:150px; >

Under FF, the second and third attributes are not recognized by FF, so it reads height:100px;

Under IE7, the third attribute is not recognized by IE7, so it reads the first , 2 attributes, and because the second attribute covers the first attribute, IE7 finally reads the second attribute *height:120px;

Under IE6, IE6 recognizes all three attributes. , so all three properties can be read, and because the third property overwrites the first two properties, IE6 finally reads the third property.

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 and will As a result, the page is not 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:

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE*/

Then under firefox The font color is displayed as #333, the font color is displayed as #666 under IE6, and the font color is displayed as #999 under IE7.

2 Centering issues in css layout

The main style definitions are 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 within 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 definition

It should be noted that if you want to use this method to center the entire page , it is recommended not to wrap it in a DIV. You can split out multiple divs in sequence, as long as you 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 the float}

Let’s talk about the two elements of block and inline in detail, and the Block element The characteristics are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block elements); the characteristics of the Inline element are: it is on the same line as other elements,... cannot be controlled (inline elements) ;

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;

5 IE Problems with width and height

IE does not recognize the definition of min-, but in fact it treats normal width 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 页面的最小宽度

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

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

#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的间距.

#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>

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; }

解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。

IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。

仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题 。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容，建议遵循正确的标签嵌套(div ul li 嵌套结构关系)，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容)，很多情况下也许一个兼容都不用也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器，只有IE5.x可见
@media tty {
i{content:"";/*" "*/}} @import ’ie5win.css’; /*";}
}/* */

IE5/MAC的过滤器，一般用不着
/**//*/
@import "ie5mac.css";
/**/

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的!important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。

div ul li 的嵌套顺序

Specific nesting writing method

Follow the above nesting method,

and then in CSS It tells ul {Margin:0px;Padding:0px;list-style:none;}, where list-style:none does not allow the

tag to display directory type tags such as dots or numbers at the front, because IE The default effect displayed by Firefox is 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. No need for you to repeatedly debug different compatibility methods in different places? This will reduce your trouble. 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!

Reprinted from: http://blog.csdn.net