热搜关键词

微信分销商城

长沙小程序开发

长沙小程序多少钱

企业做网站

建站常识

长沙做网站公司常用的CSS兼容技巧

时间：2014-09-18
发布：维讯网络
浏览：1660

[摘要] 网站开发人员，在开发过程中，总是会遇到许多莫名其妙的BUG，其中，以IE6不兼容的问题据多。我们有什么办法能够让写的网站样式全兼容呢?这就需要很多css技巧了，下面是长沙做网站公司小编总结的一些css技巧，相信对大家能够有点帮助。需要图片在层中是垂…

　　网站开发人员，在开发过程中，总是会遇到许多莫名其妙的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是大侠，只要服从它。

关键词：

上一篇：平面设计和网页设计之间的差别

下一篇：平面设计和网页设计之间的差别