一些css技巧分享给大家


发布日期:2015-06-01

 

今天沈阳网站开发总结了一些关于一些css技巧来和大家一起分享,希望您看过之后会有所帮助。

IE,FF高度自适应问题(最大高度,最小宽度,最大宽度)
    最大高度,max-height: 180px; _height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); 后面两条是解决IE6问题。
    最小宽度,min-width: 900px; _width: expression(this.width < 600 ? 600: true);
    最大宽度,max-width: 300px; _width: expression(this.width > 600 ? 600: true);
子元素负边距问题
    IE6:超出父元素的部分会被父元素覆盖。FF:分两种情况当父元素有边框或内边距时,超出父元素的部分会覆盖父元素;没有时父元素拥有负边距。解决方法:子元素定义相对定位。同时IE下子容器如果包含属性position:relative,则父容器失效(IE bug),所以也需要设置父容器position:relative解决,IE6需要zoom:1来触发haslayout
IE6诡异的奇数BUG
    当父元素相对定位,子元素绝对定位时,倘若父元素的高或宽的数值是奇数,那么IE6下绝对位置会出错。解决方法: 数值改成偶数,IE6是大侠,只要服从它。
需要图片在层中是垂直居中
    当需要图片在层中是垂直居中,可以图片定义vertical-align: middle;,再在图片左侧加入,定义样式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。
子元素浮动,父元素不能自动适应高度
    FF IE7下可以在父元素定义overflow: auto; IE6加入 zoom: 1; 这个触发IE的.layout。或在浮动元素后加入在浮动层后面加入。
IE,FF下子元素的上下外边界问题(定义宽度)
    IE6:子元素的上边距和父元素的上内边距叠加。FF:子元素上边距显示在父元素上方。解决方法:在父元素增加 overflow:hidden;或给父元素增加边框或内边距。
IE,FF下子元素的上下外边界问题(定义高度)
    IE6:子元素上边距显示正常。FF:子元素的上边距和父元素的上内边距相加。解决方法:1、给父元素定义内边距。2、父元素设置边框,子元素定义上外边距。3、父元素定义overflow: hidden;,子元素定义上外边距。
IE,FF高度自适应问题(最小高度)
    在IE6下子元素的高度能够撑开父元素,但FF,IE7下不可以。解决办法:父元素定义min-height:高度值; height:auto !important; height:高度值; (要注意先后顺序不能错)