div CSS browser compatibility issues (IE6.0, IE7.0, ie8, FireFox...) 3_html/css_WEB-ITnose

IE7.0 出来了，对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章： 现在我大 部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没 按要求显示！下面是三个浏览器的兼容性收集.  

第一种，是CSS HACK的方法   

height:20px; /*For Firefox*/   
*height:25px; /*For IE7 & IE6*/   
_height:20px; /*For IE6*/   

注意顺序。   

这样也属于CSS HACK，不过没有上面这样简洁。   
#example { color: #333; } /* Moz */   
* html #example { color: #666; } /* IE6 */   
*+html #example { color: #999; } /* IE7 */   


第二种，是使用IE专用的条件注释   

   
   

   
   
   

   
   
   

第三种，css filter的办法，以下为经典从国外网站翻译过来的。.   

新建一个css样式如下：   
#item {   
     width: 200px;   
     height: 200px;   
     background: red;   
}    

新建一个div,并使用前面定义的css的样式：   

some text here

;

Add the lang attribute here in the body representation, Chinese is zh:


Now define another style for the div element:
*:lang(en) #item{
background:green !important;
}

This is done to overwrite the original css style with !important, because the :lang selector ie7.0 does not It is not supported, so it will not have any effect on this sentence, so the same effect is achieved under IE6.0. However, unfortunately, Safari does not support this attribute either, so the following CSS style needs to be added:
#item:empty {
background: green !important
}
: The empty selector is a CSS3 specification. Although Safari does not support this specification, this element will still be selected regardless of whether this element exists. The green color will now appear on all browsers except Internet Explorer.

For compatibility with IE6 and FF, you can consider the previous one!important Personally, I prefer the first one, which is simple and has better compatibility

What is browser HACK: 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 incorrectly. Normally, when we write CSS, we will be very annoyed. We just fixed the problem in this browser, but another browser has a new problem. HACK is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe! powered by 25175.net

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, there are still many differences from FF. So you need to use the HACK of IE7. Many friends have asked what the HACK of IE7 is, but I actually don’t know. I haven't found a specific HACK for IE7 yet. In addition to the previous article, the hack 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 IE and FF's HACK together. Here are three HACKs, for example: (Suitable for novices, haha, experts will pass by here.)

Program code

The first HACK is common to all browsers of IE FF (it is not actually a HACK)
height:100px;
The second HACK is exclusive to IE6
_height: 100px;
The third HACK IE6 IE7 public
*height:100px;

Now that we have introduced these three HACKs, let’s take a look at how to define IE6 for each attribute in a style IE7 FF-specific HACK, look at the following code, 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 overwrites the first attribute, IE7 finally reads the second attribute. 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 it. is the third attribute.





1 css style for firefox ie6 ie7

Now most of them use !important to hack, and the test for ie6 and firefox can be normal Display, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! I found a good hack for IE7 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; } /* IE7 */


Then The font color is #333 under Firefox, #666 under IE6, and #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; }

Explanation:

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

Here we will explain in detail the two elements of block and inline, 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 清除浮动

.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]{}
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, visible to OP*/
select:empty {font:12px !important;} /*visible to safari*/
Select here 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 HACK 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 a HACK for IE6. In fact, IE5.x can also recognize this HACK. 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 it
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 the

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 HACK to clear the floating to define the parent once, which can solve this problem.

Truncation ellipses
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
This is after exceeding the length It will automatically cut off the excess text and end it with an ellipsis, which is a very good technique. 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 hacks in writing CSS. It is recommended to follow the correct tag nesting (div ul li nested structural relationship), which can reduce the frequency of using hacks and avoid misunderstandings. It is not a The page requires a lot of hacks to maintain multi-browser compatibility). In many cases, the browser may work very well without even a single Hack. These are used to solve local compatibility problems. If you want to improve 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 Hack is a perfect multi-browser compatible solution. Put the places where hacks are needed separately. In a file, when the browser version is consistent, the Hacked 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 hacks. In many cases Next, when I write CSS, if I write all the code including Hack into a CSS file, it will be very casual. I can hack as much as I want. But when you write independently, you will unconsciously consider whether If it is necessary to hack, should you first hack the CSS? Or should you first adjust the things in the main CSS so that you don’t need to hack as much as possible? When you can make many browsers behave very well with just a few hacks, are you very surprised? Do you have a sense of accomplishment? Do you know how to choose~~ Haha

IE’s if condition Hack can be used 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

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