新闻资讯

首页 > 新闻中心 > 新闻资讯 > 正文

平时有可能用到的一些css技巧
2018-11-02 08:45:40 阅读:

    网站开发人员,在开发过程中,总是会遇到许多莫名其妙的BUG,其中,以IE6不兼容的问题据多。我们有什么办法能够让写的网站样式全兼容呢?这就需要很多css技巧了,下面是淮安互联网站建设公司总结的一些css技巧,相信对大家能够有点帮助。

需要图片在层中是垂直居中

    当需要图片在层中是垂直居中,可以图片定义vertical-align: middle;,再在图片左侧加入,定义样式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。

子元素浮动,父元素不能自动适应高度

    FF IE7下可以在父元素定义overflow: auto; IE6加入 zoom: 1; 这个触发IE的.layout。或在浮动元素后加入在浮动层后面加入。

IE下图片产生的间隙

    父元素直接包含,这个图片下方会和父元素边缘产生间隙。 解绝方法:1.在源代码中让和在同一行,因为那个间隙是由换行符产生的。2.给添加样式 display:block;

IE下高度低于10像素时问题

    块元素最小高度为10px,当高度定义小于10px时,仍为10px; 解决方法:为此块元素添加样式 overflow:hidden; 或font-size: 0;

IE,FF下列表的li为浮动,则列表后面的元素不能换行的问题

    解决方法:为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。或加上

IE,FF下子元素的上下外边界问题(不定义宽高)

    子元素的上下外边界和父元素上下外边界叠加,并且显示在父元素外面。解决方法:在父元素增加 overflow:hidden;或给父元素增加边框或内边距。

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:高度值; (要注意先后顺序不能错)

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是大侠,只要服从它。

               转载自淮安浪强网络科技有限公司  http://haiis.com

联系我们
工作时间
周一至周五 9:00-18:00
工作时间咨询电话
0517-89081577
节假日咨询电话
13861678970 Mr.王
我们的地址
淮安市承德南路266号淮安软件园1号楼502室
点击按钮在线咨询
客服NO.1 客服NO.2 客服NO.3
我们的联络邮箱
waves@haiis.com
返回顶部
返回顶部 QQ咨询QQ咨询 联系电话0517-89081577 微信公众号二维码