CSS常见问题修正方法,经典实用!

  1. 横向居中问题:设置左右外边距为margin就可以了,比如margin:0 auto;需要注意的是一定要设定了宽度才可以,另一点需要注意的是,IE6一下版本该方法不能居中,可以给body设置:text-align:center;同时给容器设置text-align:left;
  2. 浮动清除:使用浮动属性后会将没有浮动的元素遮住(浮动后脱离文档流),这时候就需要清除浮动,一般有两个方法:给浮动父元素设置overflow:hidden属性。第二个方法:在浮动元素之后加一个空元素,设置clear:both属性。这个方法还有更好的写法,比如.cf:before, .cf:after {
    content:””;
    display:table;
    }
    .cf:after {
    clear:both;
    }
    .cf {
    zoom:1;
    }
  3. 超链接效果显示不正确:这肯定是顺序设置错了,正确是顺序是“LVHA”,即link,visited,hover,active。高级用法,让已访问的链接鼠标指示效果不一样:a:visited:hover{}
  4. CSS如何透明:加入如下属性filter:alpha(opacity=0.7);opacity=0.7
  5. IE6双边距问题:元素浮动同时设置了和浮动方向相同的margin,IE6就会出现该方向margin加倍的问题,修正方法:display:inline;注意这种问题只会出现在第一个元素上面;
  6. 楼梯式Bug:做导航条的时候,对li设置浮动,在IE7及以下浏览器li会逐渐向下,可以加上display:inline;属性来解决。
  7. IE6 LI空行bug:多个LI a垂直排列的时候,会出现很大的间距,就像是多了个空行,解决方法:一、display:inline;二、显示设置一个高度;三、给链接设置浮动,并清除浮动;
  8. IE6小高度无法设置:设置个小高度的时候,IE6的高度总是在14像素左右,解决方法一、设置字体大小为0,行高和高度一样,方法二、overflow:hidden;方法三、加上zoom:0.08;
  9. 跨出边距的Bug:父元素已经设置了overflow:hidden;属性,子元素设置了position:relative;并且子元素高度超过父元素,子元素超出部分,父元素不会隐藏,而是超出父元素,解决方法是给父元素加入position:relative属性;
  10. 除了IE6,7,其他的浏览器对空Div的宽度不能正确解析,表现症状为不显示该DIV,如果想要显示,应该设置一个高度
  11. 做导航的时候,对li进行浮动,如果不设置宽度,在IE6下面不能自适应,如何解决?
  12. Text-overflow属性在chrome中不起作用?
  13. IE6躲猫猫bug,发生条件,前面有一元素浮动,并且内容撑开了容器,后面元素不浮动,里面有超链接,并对超链接设置了hover样式,这样当鼠标指上去时,前面元素超出后面元素高度的部分会隐藏,解决方案,1,清除浮动;2,给浮动元素设置position:relative属性;3,给父元素设置高度,一般来说这个问题出现的几率比较低
  14. 如果z-index值不起作用,查看父元素的z-index值是否够高,因为z-index是不可以继承的;
  15. IE6窗口调整大小的bug:调整窗口大小的时候,说有相对定位的元素都不动,可以给body加入position:relative来解决
  16. IE系列超链接虚线边框解决方法,给元素添加onclick=”this.blur()”,对于火狐,可以设置a {outline:0}
  17. IE图片下方有间隙,可以设置display:block(谷歌浏览器,火狐浏览器有用),或者vertical-align:top,bottom,middle等(全部浏览器均有用)或者margin-bottom:-5px;(全部浏览器均有用)等等
原文链接:,转发请注明来源!

发表评论