CSS教程:Firefox浏览器下margin-top问题

很早之前就有发现这个问题，也慢慢的摸索出了一些避免这个问题的规律，但是因为比较懒，迟迟没有细究原因，今天再次遇到，忍无可忍...一探究竟。

长出现两种情况

（一）margin-top失效
先看下面代码：

div
div class="box1" float:left/div
div class="box2"clear:both; margin-top:20px;/div
/div

两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//...<a href="https://www.tulaoshi.com/n/20160220/1631802.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="https://www.tulaoshi.com/n/20160220/1631802.html" target="_blank">CSS教程:Firefox浏览器下margin-top问题</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1630176" target="_blank"><img src="https://img.tulaoshi.com/201602/19/45c84eaba86a6fe05b59f42b76b0cef4_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630176.html" target="_blank">FireFox浏览器和IE浏览器下CSS兼容问题</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式...<a href="https://www.tulaoshi.com/n/20160219/1630176.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/羿康装饰/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/6.jpg" /><span>羿康装饰</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630505" target="_blank"><img src="https://img.tulaoshi.com/201602/19/c223e899c97afea36ec4cf8114a34d23_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630505.html" target="_blank">认识浏览器：Firefox 浏览器</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> Firefox 是由 Mozilla 开发的开源 web 浏览器。 Firefox 是什么？ Firefox 是一款免费的可用于 Windows、Linux 和 Mac 的开源 web 浏览器。它小巧快速，可提供弹窗阻止和标签式浏览等许多新特性。 Firefox 基于 Mozilla 代码，是标准兼容性最好的浏览器之一。 Firefox 可用于 Windows 98、Windows 2000、Windows XP、Mac OS X 以及 Linux。 Firefox 3 Mozilla 的最新版浏览器，Firefox 3，于 2008 年 ...<a href="https://www.tulaoshi.com/n/20160219/1630505.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/我平凡绝不平庸/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/5.jpg" /><span>我平凡绝不平庸</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1626396" target="_blank"><img src="https://img.tulaoshi.com/201602/19/0d455befdaffd6fe9e945738ea110998_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1626396.html" target="_blank">firefox浏览器支持的CSS鼠标样式</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 虽说在CSS参考手册中注明了cursor兼容性：IE4.0+ NS6.0+ 继承性：有。但还是有些属性值在FF环境中不支持. FF及IE6＋支持的鼠标样式有 all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 crosshair...<a href="https://www.tulaoshi.com/n/20160219/1626396.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/程_程/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/6.jpg" /><span>程_程</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">9</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629911" target="_blank"><img src="https://img.tulaoshi.com/201602/19/7e5bda0410d134e6a182b10c1fa8a1e3_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1629911.html" target="_blank">DIV CSS布局浏览器兼容的问题</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 刚学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 *...<a href="https://www.tulaoshi.com/n/20160219/1629911.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/音乐路上陪你走/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/11.jpg" /><span>音乐路上陪你走</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">7</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630237" target="_blank"><img src="https://img.tulaoshi.com/201602/19/34bed7a807fc1c84e128dc8233ed6e2f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630237.html" target="_blank">CSS解决浏览器的等宽空格问题</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 原文：http://www.gracecode.com/Archive/Display/2254 很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用   等这样的占位符。但是   也不是很可靠，比如空格间距非常大，那么我们必须增加多个占位符，同时页面的体积会变得非常大。同时，注意到 Safari 中的   宽度是已设定字符的空格宽度（Safari 的默认字...<a href="https://www.tulaoshi.com/n/20160219/1630237.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/苍嘉烨彻/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>苍嘉烨彻</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630533" target="_blank"><img src="https://img.tulaoshi.com/201602/19/0ad2652221d09f3b98cda4d4cb3aa387_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630533.html" target="_blank">IE和Firefox浏览器CSS网页布局不同点</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 我们讨论的主题 CSS网页布局，最令大家头疼的问题就是浏览器兼容性，虽然webjx.com介绍过很多这方向的知识，但依然让很多开发人员晕头转向，今天的这篇文章，将列出css和javascript在IE和Firefox中二十三个不同点，希望对大家的学习有所帮助。一、document.formName.item("itemName") 问题问题说明：IE下，可以使用 document.formName.item("itemName")...<a href="https://www.tulaoshi.com/n/20160219/1630533.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/刘叔叔o/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>刘叔叔o</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">7</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621948" target="_blank"><img src="https://img.tulaoshi.com/201602/19/fb76ee9841580f48fa926ebbd2da1759_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621948.html" target="_blank">解决浏览器的等宽空格CSS问题方法</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用  等这样的占位符。但是   也不是很可靠，比如空格间距非常大，那么我们必须增加多个占位符，同时页面的体积会变得非常大。同时，注意到 Safari 中的   宽度是已设定字符的空格宽度（Safari 的默认字体为 Times），也就是说一个中文字符需要两个...<a href="https://www.tulaoshi.com/n/20160219/1621948.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/zhangziw8899/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/28.jpg" /><span>zhangziw8899</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">7</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630943" target="_blank"><img src="https://img.tulaoshi.com/201602/19/7a681cf212a599a59279f3f9b99628b6_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630943.html" target="_blank">CSS教程:论CSS选择器的浏览器支持</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 我很久以前就开始计划着整理一下CSS选择器的浏览器支持，因为CSS3增加了很多非常有用的选择器。CSS属性选择器制作个性化链接样式作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况，我将其翻译过来并进行进一步的整理，将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表，以及我自己平时总结的一些tips。熟悉jQuery的人可能都知道，jQuery的灵魂就是它的选择...<a href="https://www.tulaoshi.com/n/20160219/1630943.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/xuzubao/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>xuzubao</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1604740" target="_blank"><img src="https://img.tulaoshi.com/201602/19/aae57e9c495d9e7a5cf77cd11c8aee6e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1604740.html" target="_blank">浏览器CSS兼容方案</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。一般情况下，我都会兼顾IE 6.0...<a href="https://www.tulaoshi.com/n/20160219/1604740.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/北京小青年33/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>北京小青年33</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621627" target="_blank"><img src="https://img.tulaoshi.com/201602/19/f2a2493f5a8fe80fc12dd881d8454f41_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621627.html" target="_blank">多种浏览器下CSS控制DIV居中的代码</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。 margin-left:auto; margin-right:auto; 其实等同于： margin:0 auto; 于是可以使用这种方式，但是有人用IE时发现没有居中。这里建议你看看是否遗漏了DTD声明。＜!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/T...<a href="https://www.tulaoshi.com/n/20160219/1621627.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/简繁真复杂/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/7.jpg" /><span>简繁真复杂</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">18</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621614" target="_blank"><img src="https://img.tulaoshi.com/201602/19/4da2816c667d9969f1243bfbc3a87ae1_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621614.html" target="_blank">CSS 浏览器的等宽空格</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用   等这样的占位符。但是   也不是很可靠，比如空格间距非常大，那么我们必须增加多个占位符，同时页面的体积会变得非常大。同时，注意到 Safari 中的   宽度是已设定字符的空格宽度（Safari 的默认字体为 Times），也就是说一个中文字符需要两个占...<a href="https://www.tulaoshi.com/n/20160219/1621614.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/gdwsggb/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>gdwsggb</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630353" target="_blank"><img src="https://img.tulaoshi.com/201602/19/3f357fcfefe8f482c9cf2081b6a655ca_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630353.html" target="_blank">CSS实现强制浏览器分页</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 虽然webjx.com向大家介绍了很多CSS属性的相关知识，但有些非常冷门的属性还是有所欠缺。在B/S程序中，对打印页面的控制，CSS相对比较弱，例如：自动分页，就基本没啥实际用途。我们通常需要自己在需要的时候，强制浏览器分页，这时可以使用以下样式： style type="text/css" .webjxcom { page-break-after:always;} /style auto ：对页面分割没有影响。 always：强制在元素...<a href="https://www.tulaoshi.com/n/20160219/1630353.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/a18731777116/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>a18731777116</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">11</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629700" target="_blank"><img src="https://img.tulaoshi.com/201602/19/812c2f90744f5d746fad4880d2845c50_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1629700.html" target="_blank">CSS:浏览器特定选择器介绍</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child+html {} * html {} 只对IE 7 *:first-child+html {} 只对IE 7 和现代浏览器 htmlbody {} 只对现代浏览器(非IE 7) html/**/body {} 最新的Opera 9以下版本 html:first-child {} Safari html[xmlns*="] body:last-child {} 要使用这些选择器，请在样式前写下这些...<a href="https://www.tulaoshi.com/n/20160219/1629700.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/望海的女人a/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/10.jpg" /><span>望海的女人a</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1609222" target="_blank"><img src="https://img.tulaoshi.com/201602/19/8c5e3853b1a27b7fbe27eba335ac0653_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1609222.html" target="_blank">CSS选择器的浏览器支持</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 我很久以前就开始计划着整理一下CSS选择器的浏览器支持，因为CSS3增加了很多非常有用的选择器。之前我也写过一篇《使用CSS选择器创建个性化链接样式》，作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况，我将其翻译过来并进行进一步的整理，将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表，以及我自己平时总结的一些tips。熟悉jQuery的人可能都知道，jQuer...<a href="https://www.tulaoshi.com/n/20160219/1609222.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/龙门盛会/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>龙门盛会</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629554" target="_blank"><img src="https://img.tulaoshi.com/201602/19/22f78abc66c76984e04c170b6a33c83b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1629554.html" target="_blank">CSS教程:浮动元素对浏览器的支持</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 当元素设置浮动(float)后会被移出文档流，相信大家都会经常遇到这样的问题。这问题的解决办法有N种之多，因为每种浏览器对CSS的解析各异，所以在不同浏览器使用清除浮动的元素也会有所不同。我认为目前还没有最好的清除浮动元素或组合，而是根据情况分析而选择，最好的清除浮动元素或组合。为了兼容不同浏览器，可能要使用不同的清除浮动元素组合使用，如：{overflow:hidden; zoom:1;}、{display:ta...<a href="https://www.tulaoshi.com/n/20160219/1629554.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/源子sunny/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/14.jpg" /><span>源子sunny</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1598904" target="_blank"><img src="https://img.tulaoshi.com/201602/19/ca697bb7eea3ff28ac48b06059dfed53_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1598904.html" target="_blank">CSS样式表教程：浏览器默认样式</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}；不过现在说的可不只是这些。基本上，不同内核的两个浏览器在某些元素的表现都会存在差异，比如缩进的大小、字体选择、字符样式等。也许一个很漂亮的CSS样式表在一个浏览器上表现良好，在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来，我都是浏览器默认样式在作怪。因此，我们在生...<a href="https://www.tulaoshi.com/n/20160219/1598904.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/甜蜜宝贝的小屋/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>甜蜜宝贝的小屋</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1598332" target="_blank"><img src="https://img.tulaoshi.com/201602/19/24d82f9403a28b971d7032f7c60e0178_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1598332.html" target="_blank">各种浏览器兼容问题</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 关于用脚本设置onload事件句柄在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.body.onload是undefined(未定义)，把一个函数赋值给undefined既不会发生什么事情，也不算出错。这么写的在IE、Opera和FF都有效：关于用脚本绑定事件句柄 IE 下用 attachEvent， FF 下用 addEventListener 相关讨论如下： http://search.blueidea.com/?q=addEventListener&bi...<a href="https://www.tulaoshi.com/n/20160219/1598332.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/看着叫吧smile/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>看着叫吧smile</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631483" target="_blank"><img src="https://img.tulaoshi.com/201602/20/14949b2ed13a169ec99290b4ac59e34c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1631483.html" target="_blank">CSS教程:认识CSS初始化(重设浏览器的样式)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 为什么要初始化CSS？以前网页教学网讲过CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不近相同，所有开发时的第一件事可能就是如果把他们统一。也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。初始化CSS的一个小实例： html, body, div, span, h1, ...<a href="https://www.tulaoshi.com/n/20160220/1631483.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/dtnsetbv/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>dtnsetbv</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630710" target="_blank"><img src="https://img.tulaoshi.com/201602/19/fa05e18b415dec3285abe1acee3eb49b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1630710.html" target="_blank">CSS教程:CSS控制浏览器滚动条的源代码</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 1．overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本颜色 scrollbar-dark-shadow-color立体滚动条强阴影的颜色 ...<a href="https://www.tulaoshi.com/n/20160219/1630710.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/李爷345/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>李爷345</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">8</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621304" target="_blank"><img src="https://img.tulaoshi.com/201602/19/12b1f906a65b69bb0aaa6a36fb1b29b6_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621304.html" target="_blank">浏览器发展/CSS布局/怎样运用?</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 浏览器发展/CSS布局/怎样合理运用？ IE7正在逼近...为什么使用逼近这个字眼呢？因为我为曾经使用CSS布局的网站感到担忧. CSS Hack 曾经为了让多个浏览器达到同样的效果,使用的又是CSS布局,我使用了CSS Hack.但随着IE7的到来,一些作用的失效,布局又出现了严重的问题.难道我们所提倡的CSS布局就是这样的让人不安么？出现问题自然会让人想到出现问题的原因.其实不难发现我们使用CSS Hack都是在解决一些鸡毛...<a href="https://www.tulaoshi.com/n/20160219/1621304.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/LHL1002xuanyi/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/14.jpg" /><span>LHL1002xuanyi</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21269.html">上一页</a><a href="/reader/21266.html">21266</a><a href="/reader/21267.html">21267</a><a href="/reader/21268.html">21268</a><a href="/reader/21269.html">21269</a><a href="/reader/21270.html" class="cur">21270</a><a href="/reader/21271.html">21271</a><a href="/reader/21272.html">21272</a><a href="/reader/21273.html">21273</a><a href="/reader/21274.html">21274</a><a href="/reader/21271.html">下一页</a> </div> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="https://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="https://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div>  <script type="text/javascript" src="https://static.tulaoshi.com/js/zt.js"></script> </body> </html>