Css样式问题.doc

Css样式问题1、 IE中怎么会出现双倍边距？左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍div float:left;margin-left:10px;width:420px;height:150px;border:1px solid red 本来左边距设置为10px，但IE6.0解释为20px,解决办法就是是加上display:inline。4、为什么对容器设置float又要设置display:inlineul li float:left;margin:0 12px 12px 0; display:inline;display:inline的意思是基线显示，可以消除IE6和IE7下的浮动BUG，display:inline可以消除IE6双倍边距的BUG。2、闭合浮动元素（clearing float）的简单方法 Float left Float right #wrap border:6px #ccc solid; overflow:auto; _height:1%; .column_left float:left; width:20%; padding:10px; .column_right float:right; width:75%; padding:10px; border-left:6px #eee solid;_height:1%主要是针对IE不能清除浮动而设置的。overflow:auto清除浮动 2、a清除浮动的新方法清楚浮动的问题,以前一般用clear:both,今天看到一个更好的解决办法：增加了width 和overflow 两个属性就可以了2、b外层box自动计算高度的问题根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:.outer width:600px;background:#000;.inner1 float:left;width:200px;height:100px;margin:5px;background:red;.inner2 float:left;width:200px;height:100px;margin:5px;background:yellow;火狐中浏览效果！IE中浏览效果Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：.outer width:600px;background:#000;overflow:auto;.inner1 display:inline;float:left;width:200px;height:100px;margin:5px;background:red;.inner2 display:inline;float:left;width:200px;height:100px;margin:5px;background:yellow;.clear clear:both; 3、display:block就是将元素显示为块级元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , , 和 是块元素的例子display:inline就是将元素显示为行内元素.inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。, , , , , 和是inline元素的例子。如果你给一个行内元素定义宽度,那么它只是在IE6下有效.你不能定义行内元素的宽度,为了解决这个问题你可以将行 内元素转变为块元素.如：span width: 150px; display: block 5、IE6下清除容器内图片下方的空隙在一个div容器内插入图片后，图片的下方会有一个小空隙，一般情况下可以忽略不计，但当图片下方需要和容器下方对齐时，这时就需要解决这个图片下的空隙，这个应该是IE6的bug，怎么做呢？试过了用margin和display方法都没效果，原来把该窗口的字体大小设置为0就好了！6、居中问题需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：你可以这样定义使它横向居中：#wrap width:760px; /* 修改为你的层的宽度 */ margin:0 auto; 但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：#outer text-align:center; #wrap width:760px; /* 修改为你的层的宽度 */ margin:0 auto; text-align:left; 第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了 IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.1. div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行.2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： 相应的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; /实现同一行排列的效果 6.DIV浮动IE文本