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!

Common to all browsers
height: 100px;

Special for IE6
_height: 100px;

Special for IE6
*height: 100px ;

Exclusive for IE7
* height: 100px;

Shared for IE7 and FF
height: 100px !important;

1. CSS HACK

1, !important

With IE7’s support for !important, the !important method is now only for IE6’s HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance.)

The following is the quoted content:

以下为引用的内容：

width: 100px!important; /* IE7 FF */

width: 80px; /* IE6 */
}

2, IE6/IE7 vs. FireFox

The following is the quoted content:

*html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.

*html #wrapper { width: 80px;} /* ie6 fixed */* html #wrapper { width: 60px; } /* ie7 fixed, pay attention to the order*/} Note:* html HACK for IE7 must be guaranteed There is the following statement at the top of the HTML: 2. Universal float closure For the principle of clear float, please refer to [How To Clear Floats Without Structural Markup]Add the following code to Global CSS to provide the needed Just add class="clearfix" to the closed div, and it works every time.

The following is the quoted content:

3. Other compatibility tips

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) For example, width:115px !important;width: 120px;padding:5px;

It must be noted that !important; must be in front.
2, centering problem.
1). Vertically center. Set line-height to the same height as the current div, and then pass vertical-align: middle. (Be careful not to wrap the content.)
2). Horizontally centered. margin: 0 auto; (of course not universal)
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, FF and IE The difference in BOX understanding leads to a difference of 2px. There are also 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. It is best to add overflow: hidden. to achieve height adaptability.
7. Regarding the hand cursor . cursor: pointer. And hand is only applicable to IE.

Compatible code: Compatible with the most recommended mode.
/* 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 visit the same website, or page Sometimes, there will be some incompatibility problems. 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 an issue. New question. 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 developers. Although IE7 has become standardized, there are still many differences from FF, so IE7 needs to be used compatible.
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 pass by here.)

Program code

The first one is compatible, common to all IE FF browsers (actually not considered compatible)
height:100px;
The second one is compatible with IE6 only
_height:100px;
The third one is compatible with IE6 IE7 public
*height:100px;

Now that we have introduced these three compatibility, let’s take a look at how to define IE6 IE7 FF specific attributes for each attribute in a style Compatible, look at the code below, the order cannot 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, IE7 finally reads 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. three attributes.

1 CSS styles for firefox ie6 ie7
Now most of them use !important to hack, and the ie6 and firefox tests can display normally,
but ie7 can correct !important Explanation, it will cause the page not to be displayed as required! I found a
good hack for IE7 by using “* html”. Now browse it with IE7 and there should be no problem.
Now write a CSS like this:

The following is the quoted content:

以下为引用的内容：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
* html #1 { color: #999; } /* IE7 */

#1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */* html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth: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; //实现同一行排列的的效果 diplay:table;

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#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:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ 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代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

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: 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.

Identification for 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 /*IE6 does not recognize it*/:none;}
Here mainly separates an attribute and value through CSS comments, which are released before the colon.

Only IE6 and IE5 do not recognize
select/**/ { display /*IE6, IE5 does not recognize*/:none;}
The difference here from the above sentence is that there is an extra CSS between the selector and the curly braces Note.

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 box model's clearing method is not handled via !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 you using compatibility, and do not get into misunderstandings. 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
Only IE 5.0
IE5.0 can be recognized by IE5.5

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

If there are many things in CSS that do not follow certain rules, it will make you very upset. Although you can control it through a lot of compatibility and a lot of !important, you will find that you will be unwilling to do so in the long run. Look at many Are you envious of the excellent websites whose CSS makes IE6, Ie7, Firefox, and even Safari and Opera run flawlessly? 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

< /div> Then tell ul {Margin:0px;Padding:0px;list-style:none;} in CSS, where list-style:none is to prevent the

tag from displaying directory type tags such as dots or numbers at the front. , because the default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do any tricks. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe you will find at a certain moment: two icons if you are careful. There is a difference in quality, but that is 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. Do you need to repeatedly debug different compatibility methods in different places? 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 anymore. Although you can nest almost as much as you want with Div CSS, you will be much more relaxed by following the above rules and get twice the result with half the effort!

6. Analysis of CSS compatibility points IE vs FF

CSS compatibility points:

DOCTYPE affects CSS processing

FF: div sets margin-left, margin -right is already centered when it is set to auto, but IE cannot >FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use !important to set an additional height and width

FF: !important is supported, but IE ignores it. You can use !important as FF specifically sets the style

to vertically center the div: vertical-align:middle; increase the line spacing to the same height as the entire DIV, line-height:200px; and then insert text and it will be vertically centered. The disadvantage is that it is necessary to control the content without wrapping

cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE

FF: Add a border and background color to the link, and you need to set the display: block, and set float: left to ensure no line breaks. Referring to the menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If the height is not set, you can insert a space in the menubar. XHTML CSS Compatibility Solution Collection

There are many benefits to using the XHTML+CSS architecture. But there are indeed some problems, whether it is due to unskilled use or unclear thinking, I will first write down some of the problems I encountered below to save everyone from looking around^^

1. In mozilla firefox The inconsistent explanation with the BOX model in IE leads to a difference of 2px. Solution:

div{margin:30px!important;margin:28px;}

Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:

div{maring:30px;margin:28px}

If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;

2. The BOX interpretation of IE5 and IE6 is inconsistent. The width of div{width:300px;margin:0 10px 0 10px;}under IE5 will be interpreted as 300px-10px (right padding)-10px (left padding) final div The width is 280px, while on IE6 and other browsers the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

, about this/**/. I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands, please let me know, thanks! :)

3. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first

ul{margin:0;padding:0;}

can solve most problems.

4. Regarding scripts, the language attribute is not supported in xhtml1.1. You only need to change the code to

< type=”text/java”>

That’s it

7. 10 CSS skills you may not know

1. CSS font attribute abbreviation rules

Generally, this is how to set font attributes with CSS:

The following is the quoted content: font-weight:bold;font-style:italic;font-varient:small-caps;

以下为引用的内容：font-weight:bold;font-style:italic;font-varient:small-caps;

font-size:1em;

line-height:1.5em;

font-family:verdana,sans-serif;

font-size:1em; line-height:1.5em; font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2、同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

…

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写

…

也不能这样写

3、CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4、CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5、图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6、CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：

…

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：

…

In this way, no matter what browser, the width will be 150 points.

7. Align block elements in the center

If you want to make a fixed-width web page and want the web page to be centered horizontally, it is usually like this:

#content { width: 700px ; margin: 0 auto }

You will use

to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display this effect. Change the CSS as follows:

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

This will center the content of the web page. So

text-align: left was added to Content.

8. Use CSS to handle vertical alignment

Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.

What is the CSS method? By the way, set the line-height of these words to 2em: line-height: 2em and that's it.

9. Positioning of CSS within a container

One benefit of CSS is that you can position an element arbitrarily, even within a container. For example, for this container:

#container { position: relative }

In this way, all elements in the container will be relatively positioned. You can use it like this:

Previous article：Solution to the failure of using CSS to control DIV centering_html/css_WEB-ITnose Next article：div css page design--display differences due to browser default font_html/css_WEB-ITnose

Statement of this Website

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

DIV CSS compatibility is a common method for solving IE6/IE7/FF browsers. Perfect compatibility (transfer)_html/css_WEB-ITnose

Buy widgets