Home > Article > Web Front-end > div misalignment/solve the style incompatibility problem of IE6, IE7 and IE8_html/css_WEB-ITnose
div misalignment/solve the style incompatibility problem of IE6, IE7 and IE8_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:451233browse
The DIV using "FLOAT: LEFT" works fine in IE8 and IE7, but it moves downwards and appears blank in IE6. This is because the kernel used by IE6 increases the distance between DIVs by 3 to 5 PX by default. Therefore, try adding "margin-left:-5px;" or smaller to the STYLE of the moved DIV.
Solving the problem of style incompatibility between IE7 and IE8
Method 1: Add the following HTTP meta-tag to the page:
As soon as IE8 reads this tag, it will automatically start IE7 compatibility mode to ensure complete display of the page.
Method 2. For the entire website, adding the following descriptor to IIS can have the same effect. Of course, this will have a wider scope.
< /system.webServer>
Solving IE6, IE7, IE8 style incompatibility issues
Now we always have to consider something when making web pages Compatibility issues between browsers. Recently I am working on a SMS platform project. One of the headaches I encountered during the development of the project was that IE7 was incompatible with IE8. Later I thought of many ways to solve it. Now share it as follows:
If your page has no problem being compatible with IE7, but you don’t want to modify the existing code a lot, and it can be used normally in IE8, Microsoft claims that developers only need to build a website that is currently compatible with IE7 Adding a line of code above can solve the problem. The code is as follows:
CODE:
Solving the css style compatibility issue of firefox ie6 ie7
The most troublesome thing about making themes is the CSS style compatibility issue. Due to the different interpretations of ccs by each browser, resulting in Originally, IE7 could display normally, but when used in other browsers such as Firefox and ie6, problems such as misalignment and sinking occurred. I had to constantly switch between Firefox, ie6, and ie7 for debugging. Sigh... Recently, there are two more browsers With the addition of Google Chrome and IE8, it seems there is no hope for a certain browser to dominate the world, and we can only try to overcome compatibility issues. It is still very effective to find an article that solves compatibility issues.
1 CSS styles for firefox ie6 ie7
Now most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important. As a result, the page is not displayed as required! I found a good hack for IE7 using "* html". Now browse it with IE7 and it 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 displayed as #333 under Firefox, #666 under IE6, and #999 under IE7.
2 Centering issues in css layout
The main style definition is 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}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: always start on a new line, height, width , line height and margins can be controlled (block elements); the characteristics of Inline elements are: on the same line as other elements,... cannot be controlled (inline elements);
#box{ display:block; //You can simulate inline elements as block elements display:inline; //Achieve the effect of arranging in the same row diplay:table;
5 Problems with IE and width and height
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上也能用，可以把一个
然后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]{}
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.
Note: IE can recognize *; standard browsers (such as FF) cannot recognize *;
IE6 can recognize *, but not !important,
IE7 can recognize *, but it can also recognize !important;
FF can't recognize *, but it can recognize !important;
Use "FLOAT" :LEFT" DIV is fine in IE8 and IE7, but it moves downwards and appears blank in IE6. This is because the kernel used by IE6 increases the distance between DIVs by 3 to 5 PX by default. Therefore, try adding "margin-left:-5px;" or smaller to the STYLE of the moved DIV.
Solving the problem of style incompatibility between IE7 and IE8
Method 1: Add the following HTTP meta-tag to the page:
As soon as IE8 reads this tag, it will automatically start IE7 compatibility mode to ensure complete display of the page.
Method 2. For the entire website, adding the following descriptor to IIS can have the same effect. Of course, this will have a wider scope.
< /system.webServer>
Solving IE6, IE7, IE8 style incompatibility issues
Now we always have to consider something when making web pages Compatibility issues between browsers. Recently I am working on a SMS platform project. One of the headaches I encountered during the development of the project was that IE7 was incompatible with IE8. Later I thought of many ways to solve it. Now share it as follows:
If your page has no problem being compatible with IE7, but you don’t want to modify the existing code a lot, and it can be used normally in IE8, Microsoft claims that developers only need to build a website that is currently compatible with IE7 Adding a line of code above can solve the problem. The code is as follows:
CODE:
Solving the css style compatibility problem of firefox ie6 ie7
The most troublesome thing about making themes is the CSS style compatibility problem. Due to the different interpretations of ccs by each browser, it causes Originally, IE7 could display normally, but when used in other browsers such as Firefox and ie6, problems such as misalignment and sinking occurred. I had to constantly switch between Firefox, ie6, and ie7 for debugging. Sigh... Recently, there are two more browsers With the addition of Google Chrome and IE8, it seems there is no hope for a certain browser to dominate the world, and we can only try to overcome compatibility issues. It is still very effective to find an article that solves compatibility issues.
1 CSS styles for firefox ie6 ie7
Now most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important. As a result, the page is not displayed as required! I found a good hack for IE7 using "* html". Now browse it with IE7 and it 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 displayed as #333 under Firefox, #666 under IE6, and #999 under IE7.
2 Centering issues in css layout
The main style definition is 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; //make floats ignored}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristics of the Inline element are: : 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 same The effect of row arrangement diplay:table;
5 Problems with IE and width and height
IE does not recognize the definition of min-, but in fact it treats normal width and height as having min situation. 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 The minimum width of the page
min-width is a very convenient CSS command. It can specify that the element must be at least a certain width, so that the layout can always be 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
Then the CSS is designed 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, which will also make your HTML document less formal. It actually implements the minimum width through Javascript judgment.
7 Clear floats
.hackbox{
display:table;
//Display the object as a table at the block element level
}
or
.hackbox{
clear:both;
}
or add: after (pseudo object), Set the content that occurs after the object, usually used in conjunction with content. IE does not support this pseudo object and is not supported by Ie browsers, so it does not affect IE/WIN browsers. This is the most troublesome
...#box:after{
content: “.”;
display: block;
height: 0 ;
clear: both;
visibility: hidden;
}
8 DIV floating IE text produces 3-pixel bug
The object on the left is floated, and the right is positioned using the left margin of the outer patch. The text in the object on the right will be 3px away 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
}
HTML code
9 attribute selector (this is not considered compatible, it is a bug in hidden css)
p[id]{}div[id]{}
p[id]{}div[id]{}
This is for IE6.0 and IE6. Versions below 0 are hidden. The functions of FF and OPera
There are still differences between attribute selectors and sub-selectors. The scope of sub-selectors is reduced in form, while the scope of attribute selectors is relatively large, such as p In [id], all p tags with ids are of the same style.
10 IE hide-and-seek problem
When the div application is complex, there are some links in each column. DIV and other hide-and-seek problems tend to occur 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.
11 Height non-adaptation
Height non-adaptation means that when the height of the inner layer object changes, the height of the outer layer cannot be automatically adjusted, especially when the inner layer object uses
margin or paddign. Example:
Content in p object
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.
Note: IE can recognize *; standard browsers (such as FF) cannot recognize *;
IE6 can recognize *, but not !important,
IE7 can recognize *, but it can also recognize !important;
FF cannot recognize *, but it can recognize !important;