目前,在全球范围内,浏览器市场主要分为IE6、IE7、IE8、IE9、Firefox、Chrome、Safari以及Opera五大阵营。除了这些国际厂商外,中国的腾讯、搜狐和奇虎360、百度、盛大等已在浏览器领域布局。百家争鸣本是好事,但也给中国的站长带来了不少麻烦,为了不失去任何一个客户,站长不得不安装所有浏览器对网站进行测试。
一、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<#div id="imfloat"></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE6下理解为10px*/
display:inline;/*IE6下再理解为5px*/}
二、在CSS中加入overflow:hidden;可以灵活运用,不止防止内容溢出。还可以清除浮动。
例如:<div class="abc">
<div class="b">123</div>
<div class="c">456</div>
</div>
样式:
.abc{width:500px; border:1px #000000 solid;}
.b{float:left; width:240px; height:300px; background-color:#CCCCCC; margin-left:10px; display:inline;}
www.hukou51.com网站这段代码在IE里显示是没有问题的,但是在火狐下abc的高度并没有被b的高度撑开,如果给.abc加上overflow:hidden;则可以正常显示。
三、关于页面中的CLASS应用
代码要简洁,尽量多使用标签元素,比如
<div class=”abc”>
<ul>
<li>111111<span>2222</span></li>
</ul>
</div>
这段div中的CSS就可以写成:
.abc{}
.abc ul{}
.abc ul li{}
.abc ul li span{}
页面中有些文件的li和span都加上了class,其实如上述写法会为页面节省一部分代码空间。
四、连续的英文或数字能使容器被撑大,不能根据容器的大小自动换行。解决方法:《css之自动换行》 。连续的标点符号也不会转行,用属性 word-break:break-all; 无法达到效果,可以选用属性 word-wrap: break-word; 来解决!
五、white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
六、CSS hack(浏览器兼容):区分IE6,IE7,firefox(火狐)
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
#demo div{
width:50px; /* FireFox 有效 */
+width:60px; /* IE 7 有效 */
_width:70px; /* IE 6 有效 */
}
七、解决div在(火狐浏览器)firefox下高度自动适应问题
为BOX加上属性: overflow:hidden
<div id="Box" style="width:100%;background-color:green;overflow:hidden ;">
<div id="left" style="float:left;background-color:#333333;width:100px">左左左左左左左左左左左左左左左左左左左左</div>
<div id="right" style="float:left; ">右右</div>
</div>
八、页面中有一些是DIV里再套DIV,其实我们应该注意标签语义化,不能让我们的页面都是一味的DIV嵌套出来。例如,不能将标题放到DIV里,而不去使用H1-H6,页面中的标签:如H1-H6为标题标签,DIV为区隔标记(设定区块的摆放位置),UL LI为无序号的清单列表,OL LI为有序号的清单列表,DL DT DD为定义式清单(页面中的图文列表基本上就用这个标签),<span>为行内元素标签(<div>为大容器,大容器当然可以放一个小容器了,<span>就是小容器。),<em> <i>标签,这两个标签可以用在一段文字或一行文字中突出颜色字的样式,<p>为内容文章标签。
分享到:
相关推荐
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...
div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...
解决div+css常见兼容性问题,是你做网页的必备。
div +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +cssdiv +css
div+css div+css精通CSS
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css手册,比较不错呀!
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
DIV+CSS 源码DIV+CSS
div+css布局大全 B/S项目表现层也很重要!
通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页...
div+css,web标准,div+css布局,div+css实例,div+css模板
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
DIV+CSS简单登录界面模板,DIV+CSS布局,有用户名、密码登录框,登录按钮。
div+css30款后台模板实用div+css30款后台模板实用
DIV+CSS教程—十天学会web标准div+css标准之路WORD版.rar 很详细的讲解
table布局网页转换为div+CSS布局的转换软件. 非常快捷方便,一转眼一个老式样table布局网页的网页就转换成div+CSS布局的了,支持绝对定位和流定位.
div+css做的几套购物网站模板,适用于初学者参考学习的顶级资料。
DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板 DIV+CSS 前台 模板 DIV+CSS 白色网站模板