div CSS browser compatibility issues sorting_html/css

CSS技巧
1.div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行   powered by 25175.net
2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;    例如：    <#div id=”imfloat”>    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;
4 IE与宽度和高度的问题
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;}
5.页面的最小宽度     min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类, 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。    有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)   这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。    例如某一个wrapper如下定义：    .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决

   再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.    /* 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 */    或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。    例：   #box {background-color:#eee; }     #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

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.
12. Why is there a gap under the image 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
Add vertical-align:middle;
14. Is there any difference between id and class defined in web standards?
1. Web standards do not allow repeated IDs. For example, div id="aa" is not allowed to be repeated twice, and class defines a class. In theory, it can be repeated infinitely, so definitions that need to be referenced multiple times can be used. Use him.
2. Attribute priority issue ID has a higher priority than class, see the example above
3. Convenient for client scripts such as JS, if you want to perform script operations on an object in the page , then you can define an ID for it, 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. The content in LI exceeds the length The method of displaying it with an ellipsis
This method is suitable for 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

FF and IE
1. Div centering problem powered by 25175.net
The div is already centered when margin-left and margin-right are set to auto. However, IE does not work. IE needs to set the body to be centered. First, set the body to center in the parent Level element definition text-algin: center; This means that the content within the parent 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 problem that 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:

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.为什么IE6下容器的宽度和FF解释不同呢

让FireFox与IE兼容

问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、 standards mode的相关知识
powered by 25175.netIE6,IE7,FF
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

!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, so it has also reached ie6.0. The same effect is achieved, but 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 This specification is supported, but this element will still be selected, regardless of whether this element exists, and the green color will now appear on browsers other than IE versions.
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) When visiting the same website or page, there will be some incompatibility problems. Some will display normally, and some will display abnormally. We will be very annoyed when writing CSS. We have just fixed this browser problem. As a result, another browser had 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, it still has many differences from FF, so it is necessary to use Regarding the HACK of IE7, many friends have asked what the HACK of IE7 is, but actually I don’t know either. 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 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 in IE FF (it is not actually a HACK) height:100px; the second HACK is exclusive to IE6_height:100px; the third HACK is common to IE6 and IE7*height:100px;
Now that we have introduced these three HACKs, let’s take a look at how to define IE6 IE7 FF-specific HACKs for each attribute in a style. 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 It is height:100px;
Under IE7, IE7 does not recognize the third attribute, so it reads the first and second attributes, and because the second attribute covers the first attribute, what IE7 finally reads is The second 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. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important and will 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, and the font color is displayed under IE6 is #666, and the font color under IE7 is #999.
2 Centering issues in css layout
The main style definition is as follows:
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
Note:
First define TEXT-ALIGN: center in the parent element; this means that the content in 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 Set in a DIV, you can split out multiple divs in sequence, just 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; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
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上也能用，可以把一个

放到标签下，然后为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: in Add two 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, OP visible*/ select:empty {font: 12px !important;} /*visible in safari*/ Here select is the selector, which can be changed according to the situation. The second sentence is unique to the Safari browser on MAC.
Only IE7 recognizes * html {…} You can use this HACK when you need to make styles only for IE7.
Recognition for IE6 and below * html {...} Pay special attention to this place. Many landlords have written 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 select { display /*IE6 does not recognize*/:none;} Here we mainly use CSS comments to separate an attribute and value, which are released before the colon.
Only IE6 and IE5 do not recognize select/**/ { display /*IE6, IE5 does not recognize*/:none;} The difference here from the above sentence is that there is an additional CSS comment between the selector and the curly braces.
Only IE5 does not recognize select/*IE5 does not recognize*/ { display:none;} This sentence is the comment in the attribute area removed from the previous sentence. Only IE5 does not recognize
box model solution selct {width:IE5.x width; voice-family :""}""; voice-family:inherit; width:correct width;} The box model clearing method is not passed! important to handle. This needs to be clear.
Clear floating select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} In Firefox, when the children are all floating, the height of the parent is If you cannot completely wrap the entire child, then use this floating HACK to define the parent once, which can solve this problem.
Truncation ellipsis select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } This will automatically cut off the excess part after exceeding the length. text and end it with an ellipsis, a good technique. It's just that Firefox doesn't support it currently.
Only Opera recognizes @media all and (min-width: 0px){ select {……} } Make separate settings for the 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). This can reduce the frequency of using hacks and avoid misunderstandings. It is not required for just one page. There are many hacks to maintain multi-browser compatibility). In many cases, the browser may work very well without using any Hack. These are used to solve local compatibility problems. If you want to separate the compatibility content, Come out and 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.
IE5.x filter, only IE5.x is visible @media tty { i{content:"";/*" "*/}} @import 'ie5win.css'; /*";} }/* */
IE5/MAC filters are generally not needed /**//*/ @import "ie5mac.css"; /**/
The following are the conditional comments of IE. I personally think that conditional comments should be used Calling the corresponding Hack is a perfect multi-browser compatible solution. Put the parts that need to be hacked into a separate file. When the browser version matches, you can call the Hacked style. This is not only very convenient to use, but also And for making the CSS itself, you can more strictly observe whether it is necessary to use hacks. In many cases, when I write CSS, I would be very casual if I write all the code, including Hacks, into a CSS file. Hack as much as you want, and when you write independently, you will unconsciously consider whether it is necessary to hack. Should you hack the CSS first? Or should you first adjust the things in the main CSS to eliminate the need for hacking as much as possible? When you use very few Hacks to make many browsers behave well, don’t you feel a sense of accomplishment? Do you know how to choose? This IE conditional comment is Only IE. All IEs can recognize it
Only IE5.0 can recognize it. Only IE 5.0 IE5.0 can replace IE5.5.
Only IE6 can recognize it. Only IE 7/- IE6 and IE6 The following IE5.x can recognize Only IE 7/- Only IE7 can recognize

IE6, IE7, FF compatibility-related features
CSS HACK code: common to all browsers height: 100px;
IE6 specific_height: 100px; powered by 25175.net
IE6 specific* height: 100px;
IE7 exclusive* height: 100px;
Common to IE7 and FF height: 100px !important (priority); 1. CSS HACK The following two methods can solve almost all HACKs today.
1 , !important (not very recommended, the following one feels safest)
With IE7’s support for !important, the !important method is now only for IE6’s HACK. (Pay attention to the writing. Remember that the declaration position needs to be in advance. )
Code:
2, IE6/IE77 for FireFox
*html and *html are IE-specific tags, which are not supported by firefox. And *html is a IE7-specific tag.
Code:
3. Other compatibility techniques (quite useful)
1. Set div under FF Padding will cause width and height to increase, but IE will not. (can be solved with !important) 2. Centering problem. 1). Vertically centered. Set line-height to the same height as the current div, and then use vertical-align: middle .(Be careful not to wrap the content.) 2). Horizontally centered. margin: 0 auto; (of course not universal) 3. If you need to add styles to the content in the a tag, you need to set display: block; (common in navigation tags) 4 , the difference in understanding of BOX between FF and IE leads to a difference of 2px, and problems such as the margin of a div set to float doubling under IE. 5. The ul tag has list-style and padding by default under FF. It is best to declare it in advance to avoid Unnecessary trouble. (Common in navigation tags and content lists) 6. Do not set the height of the div as an external wrapper. It is best to add overflow: hidden. to achieve height adaptability. 7. Regarding the hand cursor. cursor: pointer . And hand is only applicable to IE. Paste the code:
Compatible code: the most recommended mode for hack. /* FF */ .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } /* IE6 */ *html .submitbutton { margin-top: 21px; } /* IE7 */ * html .submitbutton { margin-top: 21px; }

What is browser HACK: When we use different browsers (Firefox IE7 IE6) to visit the same website, or When opening the page, there will be some incompatibility problems. Some are displayed normally, and some are displayed abnormally. We will be very annoyed when writing CSS. We just fixed the problem of this browser, but another browser does not. A new problem has occurred. HACK is a method that allows you to independently write styles that support different browsers in a CSS. Now there is harmony. hehe!
The compatibility of the IE7 browser recently released by Microsoft has indeed placed a heavy burden on some web page developers. Although IE7 has become standardized, it still has many differences from FF, so IE7 HACK is needed. Many friends have asked what the HACK of IE7 is, but I actually don’t know either. 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 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 in IE FF (it is not actually a HACK) height:100px; the second HACK is exclusive to IE6_height:100px; the third HACK is common to IE6 and IE7*height:100px;
Now that we have introduced these three HACKs, let’s take a look at how to define IE6 IE7 FF-specific HACKs for each attribute in a style. 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 is height:100px;
在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;
在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#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- }
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
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上也能用，可以把一个

p对象中的内容

的三角关系。我的经验就是
在最外面，里面是
- ，当然
- 里面又可以嵌套
  什么的，但是并不建议你嵌套很多东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是
  里面放
- ，而不用
  - tag. mark, because the default effects displayed by IE and Firefox are somewhat different. Therefore, there is no need to do anything. There will be almost no difference between the things displayed by your IE6, IE7, and Firefox (outer margin, spacing, height, width). Maybe if you are careful, you will find one or two at a certain moment. It's a pixel difference, but that's perfect. You don't need to adjust large swaths of CSS to control their display. If you want, you can just hack one or two places, and usually this kind of hack can be adapted to various places. No need for you to repeatedly debug different Hack methods in different places? This will reduce your troubles. You can easily sort out the places you want to hack in the form of ul.class1, ul.class2, ul.class3 {xxx:xxxx} and unify the Hack. Give it a try and don’t nest randomly again. Although you can nest almost as much as you want with Div CSS, following the above rules will make it much easier for you and get twice the result with half the effort!

Related labels：

div+CSS浏览器兼容问题整理

source：php.cn

Previous article：JQuery/AjaX/Javascript/DIV CSS resource download address_html/css_WEB-ITnose Next article：SEO optimization div css naming rules_html/css_WEB-ITnose

Statement of this Website

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

div CSS browser compatibility issues sorting_html/css_WEB-ITnose