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.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
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.
<!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
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 useThe 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
