总结写DIV+CSS时常见的小问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:29:36
原創
1054 人瀏覽過

  1. ul和li属性的问题

  默认的ul的内外补丁(margin、padding)都不是0,如果在li中用到的左漂浮属性(float:left;)时往往会把外部div撑大,导致页面变形,而且在ie6里,第一个li会有一个小小的缩进值,最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可(margin:0;padding:0;),而解决第一个li有缩进值时则应该定义li为块状显示(display:inline;)即可

2. img属性的问题

  这里牵涉的不同浏览器的问题,ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值,会多出下面的2px的误差,解决方法是给img定义一个显示属性:img{float:left;}即可

3. overflow属性的问题

  此属性用的最多的地方就是文本域、注册协议等,因为文字篇幅比较大,但又不想占用大的页面篇幅,这里就可以定义好层的宽度和高度值,然后加上overflow:auto;属性。

4. float属性问题

  有时会在水平方向上漂浮2个或2个以上的div层,都使用了float:left;属性,最终导致下面的层会漂浮到该水平方向上来,导致页面显示非常混乱,不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎,解决以上问题方法有二,第一是将这几个漂浮的层的父级层定义clear:both;属性;第二是将这几个层的宽度值加起来的值等于父级元素的宽度值,这样下面的层自然不会漂上来。

5. height值不统一

  当height为1px时,在ie6中可能并不是1px而是超过1px,怎么解决呢?方法有两种,第一种是直接将该div层里的字号设为1px就可以了(font-size:1px;),第二种方法是在该div层里设置行高即可(line-height:1px;),但这里需要提醒下,在ie6里该层不能为空,可以写一个空格字符( )即可。 

6. css编码问题

  很多人写页面的时候习惯通过dw软件来创建一个html页面,但往往又忽略了其默认编码格式的设置,最终导致页面显示乱码。@charset "utf-8"注意这行代码,utf-8与gb2312是比较常用的两种编码方式,选择与之匹配的编码格式,避免出现乱码。

7. 关于选择器的选择(class和id)问题

  当一个div要在页面中多次使用时,不要用id,要用class,还有就是要用引用js的时候,样式最好不要用id,因为id要留给js使用,当程序员写后台用的是.net时,最好不要用id,id要留给程序员用,前台我们就用class好了。

8. div层高度自动扩展问题

  就是div层的结构很复杂,用了至少2个以上的div层,在定义好最小高及高度为自动,但最后超过层高度后导致在ff中显示为高度不自动扩展,解决ff不兼容方法很简单,只要加上:overflow:hiiden;即可。

9. 常用的兼容属性写法问题

  这里具体实例不列出了,估计长篇大论的也没问会看,我就把常用到的兼容性属性列出来,具体灵活运用就靠自己啦!建议定义属性时书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。

  ①!important属性只对ff生效,如:width:200px!important;width:100px;则ff里宽度显示为200px

  ②带“_”的属性只对ie6生效,如:color:red;_color:blue;则ie6里字体颜色为blue

  ③带“+”的属性只对ie7生效,写法如上

  ④ff什么都不识别,但样式中加上上述小符号,则优先对特定浏览器生效,例如css定义为:color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色,ie7显示为蓝色,ie6显示为红色

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板