DIV CSS布局浏览器兼容的问题

2016-02-19 23:26 10 1 收藏

下面是个简单易学的DIV CSS布局浏览器兼容的问题教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

刚学css div布局,总会遇到很多浏览器兼容的问题,这个问题困扰了一段时间,只到看了精通css才看到几个解决办法。

1.加clear空div

.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after { height: 1px;}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

使用方法:

在所有浮动层之后加上这个层

div class="clearfix"/div

2.把背景层加浮动,但是这个方法会影响其他的div,有时候好用。

3.加 overlow 这个也有问题,会影响div的外观。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

总之 希望以后的以后只有一种浏览器...

来源:http://www.tulaoshi.com/n/20160219/1629911.html

延伸阅读
标签: Web开发
原文:http://www.gracecode.com/Archive/Display/2254 很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会使用   等这样的占位符。 但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。 同时,注意到 Safari...
标签: Web开发
很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但...
标签: Web开发
找Bug 篇 原始代码,未做修正: 运行代码框 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"head runat="server"meta http-equiv="Content-Type" content=&q...
前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的 border-radius 属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏...
标签: Web开发
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。

经验教程

671

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部