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: 8a5cf3dcbde2cddfb719b2644eb32a80 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 e388a4556c0f65e1904146cc1a846bee under the 6c04bd5ca3fcae76e30b72ad730ca86d tag, then specify a class for p, and then design the CSS like this: #container{ min-width: 600px; width :expression(document.body.clientWidth b09a4cecefe7cbbaf5681d61f144af31 e749d076ae8f72fd7d46c434c5412e8494b3e26ee717c64999d7867364b1b4a3 2002cd5e929bcead2f145f8ff44c808e94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3

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: e874acc1d87dcc94f4e38d2310d5254545c658f54d71215d14e5b1542716526cThe 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 0260e51744eea96cfa9057a0cbb56c10 between 163393efcf02c2676818233c41eb2e65 76e3c42bfcaf55e241356211d1e51974. 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: 75598ae0912b4c03dd28a6ab100b9481 4b4ffd0ec90ac88eb2553cf173b6aaec94b3e26ee717c64999d7867364b1b4a3 37c140868f2899c2cb46f5c5f46172a194b3e26ee717c64999d7867364b1b4a3 79e693531e16a21dc9354accf596237f94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3 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 this2daf5ec3619714146c96b32ad692e7f3 88d6d00b283a3529d54aa16f68fe7966 4b4ffd0ec90ac88eb2553cf173b6aaec94b3e26ee717c64999d7867364b1b4a3 37c140868f2899c2cb46f5c5f46172a194b3e26ee717c64999d7867364b1b4a3 79e693531e16a21dc9354accf596237f
④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; } 753396aab491b64ee4772d02f5086612 e388a4556c0f65e1904146cc1a846beepContent in object6fb279ad3fd4344cbdd93aac6ad173ac 94b3e26ee717c64999d7867364b1b4a3 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; 080b747a20f9163200dd0a7d304ba388 9545b5a134bd137942b1a858ba57fed9 531ac245ce3e4fe3d50054a55f265927

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 browsers080b747a20f9163200dd0a7d304ba388 7ecab5773ffcbca434498ab70b47a39f 531ac245ce3e4fe3d50054a55f265927

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 FLASH405094b6be125810dcd16198fe3c0dc9

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插入 的方法来解决 9a6c6593cd224a767d2b5172bc71b53a 62bd2fb5bf4db34fc65b81c061e0e4ce 531ac245ce3e4fe3d50054a55f265927 4df436957366b6ed1040126fa5a89c56aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa94b3e26ee717c64999d7867364b1b4a3 0d20824b412c474fd1dfb16e6b8dbc6d /* 820e02f229f4e29afaa637c15b28fe5dintLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ 283ead764fe6cb05d142a40edcf84695

13. Why is the width of the container under IE6 different from the FF interpretation?a92f311850ea20d3bcac3450ce6d7d4f 0137259d31f4115748f6af98e199bf5a 952d3f16c00ff73ed0ba309a7c7449f0 080b747a20f9163200dd0a7d304ba388 e72d30c0047f29611c39d27176887b5a 531ac245ce3e4fe3d50054a55f265927 d52fd8d9710bb07ef17446f5b39c54caMake FireFox compatible with IE94b3e26ee717c64999d7867364b1b4a3 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 */

856210d33c56ae027863779b65aa76eb 1325033f74410c73959088ed41585e69 944499813959732c0355bb419c52e016 143c6e3bc1bc9260f4a692d86c87caea e42eef118e9746b78eaea3d8f2eb58e2 1b771f47d72d900ba74308aee59557f0 < ;!--[if lte IE 6]> ab7c96bcbdfab9513b1b4d441edc71f0
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: 8c6eab477ea811b2aef0ea66ce72bc0dsome text here6fb279ad3fd4344cbdd93aac6ad173ac Add the lang attribute here in the body expression, the Chinese is zh: af4276b4335489c3ca10bfad9c6fbf29 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!