Summary of how to solve css browser compatibility issues

The compatibility of CSS with browsers sometimes gives people a headache. Perhaps when you understand the techniques and principles, you will find it is not difficult. We have collected the compatibility methods of IE7, 6 and Fireofx from the Internet. And sorted it out. For the transition to web2.0, please try to write code in xhtml format, and DOCTYPE affects CSS processing. As a W3C standard, DOCTYPE must be added.

CSS Tips

1. Vertical centering problem of p vertical-align:middle; Increase the line spacing to the same height as the entire p line-height:200px; Then insert the text and it will be vertically centered. The disadvantage is that the content must be controlled not to wrap.

2. The problem of doubling the margin. If p is set to float, the margin set under IE will be doubled. This is a bug that exists in ie6. The solution is to add display:inline; to this p. For example: <#p id="imfloat"> The corresponding css is #IamFloat{ float:left; margin:5px;/*under IE, it is understood as 10px*/ display:inline;/*Under IE, it will be understood as 5px*/}

3. 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} Let’s talk about the two elements block and inline in detail: The characteristic of the block element is that it always starts on a new line, height, width, Line height and margins can be controlled (block elements); the characteristic of Inline elements is that they are on the same line as other elements and 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;

4 Problems with IE and width and height IE does not recognize the definition of min-, but in fact it combines the normal width and height height is used as if there is min. This becomes 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;}

5. The minimum width of the page min -width is a very convenient CSS command. It can specify that the minimum width of the element cannot be less than a certain width, so as to ensure that the typesetting is always 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

under the tag, then specify a class for p, and then design the CSS like this: #container{ min-width: 600px; width :expression(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. This is also It will make your HTML document less formal. It actually implements the minimum width through Javascript judgment.

6.p Floating IE text produces a 3-pixel bug. The left object floats, and the right side is positioned using the left margin of the outer patch. The text in the right object will have a 3px spacing 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} < p id="box">

7 .IE hide-and-seek problem. When the p application is complex and there are some links in each column, the hide-and-seek problem easily occurs at this time. Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page. Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

8. Float’s p closure; clear float; adaptive height;

① For example: <#p id="floatA" ><#p id="floatB" > ;<#p id=” NOTfloatC” >The NOTfloatC here does not want to continue to translate, but wants to move down. (The attributes of floatA and floatB have been set to float:left;) This code has no problem in IE, but the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed. Add < #p class="clear"> between <#p class="floatB"> <#p class="NOTfloatC">. Be sure to pay attention to the position of this p, and it must be consistent with the two There cannot be a nested relationship between p siblings with float attributes, otherwise an exception will occur. And define the clear style as follows: .clear{ clear: both;}

② As an external wrapper, do not set the height of p. In order to allow the height to automatically adapt, add it to the wrapper. Go to overflow:hidden; When a box containing float is included, automatic height adaptation is invalid under IE. At this time, IE's layout private attribute should be triggered (the evil IE!) You can use zoom:1; to achieve this. compatible. For example, a wrapper is defined as follows: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③For typesetting, the CSS description we use most is probably float:left. Sometimes we need to make a unified background behind the float p in column n, for example:

For example, we want Set the background of the page to blue to achieve the purpose of making the background color of all three columns blue. However, we will find that as the left center right stretches downward, the page actually saves the height unchanged. Here comes the problem. The reason The problem is that page is not a float attribute, and our page cannot be set to float because it needs to be centered, so we should solve it like this

Then embed a float left and p with a width of 100% to solve the problem

④Universal float closure (very important!) 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 p that needs to be closed. It works every time. /* 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 */ Or set it like this: .hackbox{ display:table; //Display the object as a block element-level table}

11. Height does not adapt. Height does not adapt when the inner object The outer height cannot be automatically adjusted when the height changes, especially when the inner object uses margin or paddign. Example: #box { } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

pContent in object< /p>

Solution: Add 2 empty p object CSS codes above and below the P object: .1{height:0px;overflow:hidden;} or add the border attribute to p.

12. Why is there a gap under the picture under IE6? There are many ways to solve this bug. You can change the layout of the html, or set the img to display:block or set the vertical-align attribute to vertical-align:top. | bottom |middle |text-bottom can be solved.

13. How to align text and text input box with vertical-align:middle;

14. There is a difference between id and class defined in web standards What's the difference? 1. Duplicate IDs are not allowed in web standards. For example, pid="aa" is not allowed to be repeated twice, while class defines a class, which can theoretically be repeated infinitely. In this way, definitions that require multiple references can be Use him. 2. The priority of attributes. The priority of ID is higher than that of class. See Example 3 above. It is convenient for client scripts such as JS. If you want to perform script operations on an object in the page, you can define it for it. An ID, otherwise you can only find it by traversing the page elements and specifying specific attributes. This is a relative waste of time and resources, and is far less simple than an ID.

15. After the content in LI exceeds the length, use an ellipsis Display method This method is applicable to IE and OP browsers

16. Why can't IE set the scroll bar color in web standards? The solution is to replace the body with html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css">
 <!-- html { 
   scrollbar-face-color:#f6f6f6; 
   scrollbar-highlight-color:#fff; 
   scrollbar-shadow-color:#eeeeee; 
   scrollbar-3dlight-color:#eeeeee; 
   scrollbar-arrow-color:#000; 
   scrollbar-track-color:#fff; 
   scrollbar-darkshadow-color:#fff; } --> 
</style>

17. Why can’t I define a container with a height of about 1px? This problem under IE6 is caused by the default line height. There are many solutions, such as: overflow:hidden | zoom:0.08 | line-height:1px

18. How to make the layer display on top of FLASH? The solution is to set transparent for FLASH

19.How Make a layer vertically centered in the browser. Here we use percentage absolute positioning, and the method of externally patching negative values. The size of the negative value is its own width and height divided by two

<style type="text/css"> 
<!-- p { 
    position:absolute; 
    top:50%; 
    lef:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
    border:1px solid red; 
   } --> 
</style>

FF and IE

1. p centering problem p is already centered when margin-left and margin-right are set to auto. IE does not work. IE needs to set the body to be centered. First define text-algin: center in the parent element; this means that in the parent element Content within a level element is centered.

2. The border and background of the link (a tag). To add a border and background color to the a link, you need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

3. The hover style does not appear after the hyperlink is visited. The hyperlink style that is clicked and visited no longer has hover and active. Many people should have encountered this problem. The solution is to change the CSS properties. Sorting order: L-V-H-A Code:

<style type="text/css"> 
  <!-- a:link {} a:visited {} a:hover {} a:active {} --> 
</style>

4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题

6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.

7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：p{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： p {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #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-}

8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}p[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择 器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过

10.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采 用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，p或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显 示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。

11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样 设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/* intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */

13. Why is the width of the container under IE6 different from the FF interpretation? < p ōnclick="alert(this.offsetWidth)">Make FireFox compatible with IE

The difference in the problem is whether the width of the border is included in the overall width of the container. Here IE6 interprets it as 200PX , and FF is interpreted as 220PX, so what exactly causes the problem? If you remove the xml at the top of the container, you will find that the original problem lies here. The statement at the top triggers IE's qurks mode. For relevant knowledge about qurks mode and standards mode, please refer to: http://www.microsoft.com/china /msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

IE6,IE7,FF IE7.0 is out, and there are new problems with CSS support. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article: Now I mostly use !important to hack, for ie6 and firefox The test can be displayed normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! The following is a collection of compatibility of three browsers.

The first is the CSS HACK method height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height :20px; /*For IE6*/ Pay attention to the order. This is also a CSS HACK, but it is not as simple as the above. #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */

< ;!--[if lte IE 6]>

The third method is the css filter method. The following is a classic translation from a foreign website. . Create a new css style as follows: #item { width: 200px; height: 200px; background: red; } Create a new p and use the previously defined css style:

some text here< /p> Add the lang attribute here in the body expression, the Chinese is zh: Now define another style for the p element: *:lang(en) #item{ background:green !important; } This is done to overwrite the original css style with !important. Since the :lang selector is not supported by IE7.0, it will not have any effect on this sentence. Therefore, the same effect under IE6.0 is achieved, but it is very difficult. Unfortunately, Safari does not support this attribute, so you need to add the following CSS style: #item:empty { background: green !important } : The empty selector is a CSS3 specification. Although Safari does not support this specification, it will still be used. Selecting this element, regardless of whether this element exists, will now be green on all browsers except IE. For compatibility with IE6 and FF, you can consider the previous !important. Personally, I prefer to use

The above is the detailed content of Summary of how to solve css browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!