DIV+CSS为了更好的兼容各浏览器，哪些代码必须写呢？
3个回答
展开全部
浏览器兼容,是个写div css老生常谈的问题了.
现在写css 不用 太多浏览器来来回回的校准,其实只要你代码写的规范,不冲突,计算准确,通常是不会出问题的.
写一个错误的css吧
padding-left:10px; float:left; 这样在ie6 浏览器下 就会出现双倍内边距 padding-left:10px 在ie6下面 因为float:left的影响,就会变成padding-left:20px 怎么解决呢? 加上display:inline属性就Ok啦.
这些都是经验之谈,其实每个新手刚刚开始学css div的时候都为浏览器兼容而头疼,几乎就是一个浏览器一个样子,还有我们写css的时候用dw的页面检查中的浏览器兼容问题,检查一下页面写的有没有问题.
其实写的多了,遇到的问题也多,经验自然也就多了,下次就知道怎么做了.
最后再说一下css hack吧.
css hack是 浏览器作弊的一个方法,针对每种浏览器对css解读方式的不同,针对每一种浏览器来写css.
就叫做css hack. 怎么用呢?
现在在写css hack的时候 很少用!important了,不知道你是否知道这个属性?
简单的解释一下吧, 在写样式表的时候经常会有优先级问题,比如:
.content li{ width:100px;}
.list{ width:105px;}
<ul class="content"><li class="list"></li></ul>
这样写 .content li{width:100px}就会被 .list 替换掉.
打个比方说吧:在写css的时候 一个标记的样式 算是 1分吧.
比如:
body{margin:0;padding:0}
一个class算3分
如果给Body应用class 那么 body{margin:0;padding:0}就无效啦,所以class比标签权重要高.
那么#id呢? 算5分好啦, 也就是说 标记 class id中 id的权重是最高的,那么我们书归正传!important的权重算10分吧,怎么用呢?
a{ width:100px !important; }
a{width:122px;}
我们知道 浏览器 在读取样式的时候是从左至右,从上到下的. 那么第二个a样式width:122px 就不会被浏览器读出来.因为刚才已经说了 一个标签 1分 一个!important 10分.
现在写css hack大多都只针对ie6 7 ff来写 至于Ie8
<meta http-equiv="x-ua-compatible" content="ie=7" /> 在head里面加入这个, ie8浏览器 就和ie7一模一样了.
写Hack的时候唯一需要注意的就顺序.
如
{width:100px; *width:90px; -width:80px;}
为什么要这么写呢? width:100px 是正常的,就不多说了, *width:90px 刚才我们说 只针对ff ie6 7写hack
*width这个" * " ff是不是别的,同样" - "也是不识别的.
" * " ie6 7都识别,但是Ie7不识别" - " 所以要把Ie6写到最后,为什么?因为要覆盖掉之前的*width
下面 来看一下 ff ie6 7解读css是怎样的.
首先是ff
width:100px; 识别 *width:90px;不识别,跳过 -width:80px;同样
那么最后的width标记属性宽度就是100px
下面看Ie7
width:100px;识别,宽度为100px *width:90px; 识别,覆盖之前的width标记宽度为90px -width:80px;不识别跳过.
最后width标记属性为90px.
最后我们来看Ie6
width:100px; 识别,宽度为100px *width:90px;识别,宽度为90px -width:80px;识别,宽度为80px;那么最后的宽度就是80因为 刚才说过 浏览器是从左至右解读代码, 当读取到3个width的时候 就会采用覆盖的方式, 之后的覆盖掉之前的. 所以ie6最后的宽度就是80px.
好啦,css hack讲解到此结束, 全部都是手打的,希望对你有帮助.
现在写css 不用 太多浏览器来来回回的校准,其实只要你代码写的规范,不冲突,计算准确,通常是不会出问题的.
写一个错误的css吧
padding-left:10px; float:left; 这样在ie6 浏览器下 就会出现双倍内边距 padding-left:10px 在ie6下面 因为float:left的影响,就会变成padding-left:20px 怎么解决呢? 加上display:inline属性就Ok啦.
这些都是经验之谈,其实每个新手刚刚开始学css div的时候都为浏览器兼容而头疼,几乎就是一个浏览器一个样子,还有我们写css的时候用dw的页面检查中的浏览器兼容问题,检查一下页面写的有没有问题.
其实写的多了,遇到的问题也多,经验自然也就多了,下次就知道怎么做了.
最后再说一下css hack吧.
css hack是 浏览器作弊的一个方法,针对每种浏览器对css解读方式的不同,针对每一种浏览器来写css.
就叫做css hack. 怎么用呢?
现在在写css hack的时候 很少用!important了,不知道你是否知道这个属性?
简单的解释一下吧, 在写样式表的时候经常会有优先级问题,比如:
.content li{ width:100px;}
.list{ width:105px;}
<ul class="content"><li class="list"></li></ul>
这样写 .content li{width:100px}就会被 .list 替换掉.
打个比方说吧:在写css的时候 一个标记的样式 算是 1分吧.
比如:
body{margin:0;padding:0}
一个class算3分
如果给Body应用class 那么 body{margin:0;padding:0}就无效啦,所以class比标签权重要高.
那么#id呢? 算5分好啦, 也就是说 标记 class id中 id的权重是最高的,那么我们书归正传!important的权重算10分吧,怎么用呢?
a{ width:100px !important; }
a{width:122px;}
我们知道 浏览器 在读取样式的时候是从左至右,从上到下的. 那么第二个a样式width:122px 就不会被浏览器读出来.因为刚才已经说了 一个标签 1分 一个!important 10分.
现在写css hack大多都只针对ie6 7 ff来写 至于Ie8
<meta http-equiv="x-ua-compatible" content="ie=7" /> 在head里面加入这个, ie8浏览器 就和ie7一模一样了.
写Hack的时候唯一需要注意的就顺序.
如
{width:100px; *width:90px; -width:80px;}
为什么要这么写呢? width:100px 是正常的,就不多说了, *width:90px 刚才我们说 只针对ff ie6 7写hack
*width这个" * " ff是不是别的,同样" - "也是不识别的.
" * " ie6 7都识别,但是Ie7不识别" - " 所以要把Ie6写到最后,为什么?因为要覆盖掉之前的*width
下面 来看一下 ff ie6 7解读css是怎样的.
首先是ff
width:100px; 识别 *width:90px;不识别,跳过 -width:80px;同样
那么最后的width标记属性宽度就是100px
下面看Ie7
width:100px;识别,宽度为100px *width:90px; 识别,覆盖之前的width标记宽度为90px -width:80px;不识别跳过.
最后width标记属性为90px.
最后我们来看Ie6
width:100px; 识别,宽度为100px *width:90px;识别,宽度为90px -width:80px;识别,宽度为80px;那么最后的宽度就是80因为 刚才说过 浏览器是从左至右解读代码, 当读取到3个width的时候 就会采用覆盖的方式, 之后的覆盖掉之前的. 所以ie6最后的宽度就是80px.
好啦,css hack讲解到此结束, 全部都是手打的,希望对你有帮助.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
2、无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
5、样式放头上，脚本放脚下。不内嵌，只外链。
6、坚决不用 CSS 表达式。
7、使用 引用样式表，而不是通过 @import 导入。
8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
12、段落之间，至少要有一倍行距。
13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
15、中文字体的粗体和斜体，远离较好，利民利己。
2、无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
5、样式放头上，脚本放脚下。不内嵌，只外链。
6、坚决不用 CSS 表达式。
7、使用 引用样式表，而不是通过 @import 导入。
8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
12、段落之间，至少要有一倍行距。
13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
15、中文字体的粗体和斜体，远离较好，利民利己。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
排版布局注意事项，可以最大化避免出现兼容性问题 1，body中指定全局字体字号，以消除不同浏览器字体的差别。
2，记得清除漂浮clear。(在具有float元素的容器底部加入清除漂浮)
3，尽量使用padding代替margin。
4，使用绝对定位进行布局时，需明确指定z-index, top, left；避免绝对定位旁边存在float元素.
5，尽量避免使用半透明png图片(PNG-24)，使用GIF代替；若使用PNG-24，用PNG修复补丁修复之；
2，记得清除漂浮clear。(在具有float元素的容器底部加入清除漂浮)
3，尽量使用padding代替margin。
4，使用绝对定位进行布局时，需明确指定z-index, top, left；避免绝对定位旁边存在float元素.
5，尽量避免使用半透明png图片(PNG-24)，使用GIF代替；若使用PNG-24，用PNG修复补丁修复之；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
