Firefox与IE下UL预设标记的异同_html

列表UL或是OL中都有一个预设标记，这个标记可能是实点圆点，也可能是数字。在实际的应用中，我们需要去掉这个预设标记，但我们不清楚这个预设标记是存在于什么位置。因为IE与FF似乎在处理UL的预设标记时都有着不同的方式：我们来写一个UL的html代码结构：

HTML结构：

<ul>
<li>建设部通报八起房地产交易违法、违规典型案例 </li>
<li>周小川表态引发美元震荡|人民币应成世界货币?</li>
<li>首都机场一香港乘客制造炸弹威胁导致航班延误</li>
<li>美国房市“麻烦”未了|底特律房子比车子便宜</li>
<li>网络报告:美国是黑客大本营中国是最大受害国</li>
</ul>

运行代码框

<!DOCTYPE <a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> <a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/xml" title="xml" rel="nofollow" target="_blank">xml</a>ns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <title>Firefox与IE下UL预设标记的异同</title></head><body><ul> <li>建设部通报八起房地产交易违法、违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <li>网络报告:美国是黑客大本营中国是最大受害国</li> </ul> </body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] </p> <h3 style="display:none;"><a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/32752.htmlFirefox与IE下UL预设标记的异同_html" rel="nofollow">http://www.gaodaima.com/32752.htmlFirefox与IE下UL预设标记的异同_html</a></h3> <p><span>这个UL在不同的浏览器中的显示基本上是差不多的。那么我们设定一下<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/css" title="css" rel="nofollow" target="_blank">css</a>试着看一下IE与FF什么地方不一样：</span></p> <p><span></span><span>CSS代码：</span></p> <p><span><span><span>ul {background:#ddd; padding:0; }</span></span> </span></p> <p><span>运行代码框</p> <p align=center><textarea rows=12 cols=78><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <title>Firefox与IE下UL预设标记的异同</title> <style type=”text/<a href="https://www.gaodaima.com/tag/css" title="查看更多关于css的文章" target="_blank">css</a>“> /*<![CDATA[*/ ul {background:#ddd; padding:0; } /*]]>*/ </style></head><body><ul> <li>建设部通报八起房地产交易违法、违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <li>网络报告:美国是黑客大本营中国是最大受害国</li> </ul> </body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code4) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code4) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] </SPAN></P></p> <p><span><span>现在只把padding的值设为0，这时我们看一下IE中除了多个背景之外并没有什么变化，但是FF中的预设标记不见了！这里要注意的是IE中的预设标记是在背景外的。我们再来换个方式来设置：</span></span></p> <p><span><span>CSS代码：</span></span></p> <p><span><span></span></span><span><span>ul {background:#ddd; margin:0; } </span></span></p> <p><span><span>运行代码框</P></p> <p align=center><textarea rows=12 cols=78><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> <a href="https://www.gaodaima.com/tag/xml" title="查看更多关于xml的文章" target="_blank">xml</a>ns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <title>Firefox与IE下UL预设标记的异同</title> <style type=”text/css”> /*<![CDATA[*/ ul {background:#ddd; margin:0; } /*]]>*/ </style></head><body><ul> <li>建设部通报八起房地产交易违法、违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <li>网络报告:美国是黑客大本营中国是最大受害国</li> </ul> </body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code3) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code3) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] </p> <p></span></span><span><span><span>这里我们再看，情况相反，IE的预设标记不见了，而FF中的预设标记还在，这里要注意的是这时FF中的预设标记是在背景里的。当然我们这里有点不理解了，到底这是为什么呢？这个预设标记究竟是在什么地方的呢？下面我们通过一个实例来看一下UL的预设标记是在什么地方的！</span></span></span> </p> <p><span><span><span>HTML结构：</span></span></span></p> <p><span><span><span></span></span></span><span><span><span><ul> <br /><li>建设部通报八起房地产交易违法、违规典型案例 </li> <br /><li>周小川表态引发美元震荡|人民币应成世界货币?</li> <br /><li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <br /><li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <br /><li>网络报告:美国是黑客大本营中国是最大受害国</li> <br /></ul> </span></span></span></p> <p><span><span><span>CSS代码：</P></p> <p><span>ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; } <br />li {background:#aaa;} </span></p> <p>运行代码框</p> <p align=center><textarea rows=12 cols=78><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <title>Firefox与IE下UL预设标记的异同</title> <style type=”text/css”> /*<![CDATA[*/ ul {background:#ddd; padding:100px; margin:100px; border:100px solid #eee; } li {background:#aaa;} /*]]>*/ </style></head><body><ul> <li>建设部通报八起房地产交易违法、违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <li>网络报告:美国是黑客大本营中国是最大受害国</li> </ul> </body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code2) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code2) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</p> <p><span>这时我们看到，margin区域是最外围的白色部分，往里有点灰色的是border，再往里是更深一点的灰色，这个区域是padding，最深的区域是内容区。而预设标记正处在padding的区域，那么是不是说把padding区去掉这个预设标记就会消失呢？我们把CSS做一下修改：</span></p> <p><span></span><span>CSS代码：</span></p> <p><span></span><span>ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; } <br />li {background:#aaa;} </span></p> <p><span>运行代码框</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p align=center><textarea rows=12 cols=78><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta http-equiv=”Content-Language” content=”zh-CN” /> <title>Firefox与IE下UL预设标记的异同</title> <style type=”text/css”> /*<![CDATA[*/ ul {background:#ddd; padding:0; margin:100px; border:100px solid #eee; } li {background:#aaa;} /*]]>*/ </style></head><body><ul> <li>建设部通报八起房地产交易违法、违规典型案例 </li> <li>周小川表态引发美元震荡|人民币应成世界货币?</li> <li>首都机场一香港乘客制造炸弹威胁导致航班延误</li> <li>美国房市“麻烦”未了|底特律房子比车子便宜</li> <li>网络报告:美国是黑客大本营中国是最大受害国</li> </ul> </body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code1) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code1) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></P></p> <p><span><span>我们把padding设为0后发现预设标记依然还在，不过这时他处在了border的上面，那么我们可以根据上面推测出预设标记并不存在于margin,padding或是border中，margin,padding与border只不过为预设标记提供了一个存在并显示的空间。而这个预设标记是浮于margin,padding与border之上的。</span></span></p> <p><span><span>那么这时我们大致上可能已经理解了，其实IE与FF对于UL的默认值的设定是不一样的，IE给了UL一个margin值，但是却没有给padding值，所以IE中UL的预设标记点是在背景外的。而FF相反给了一个padding值却没有给margin值，所以在FF中UL的预设标记点是在背景内的。但是依据上面的实例我们清楚，这个预设标记点不属于paading也不属于margin。他只属于内容部分，他一直是在内容的外边缘，当然我们还可以通过CSS来设置其在内容的内边缘。基本方式请查阅《CSS2中文手册》</span></span></p> <p><span><span></span></span><span><span>通过上面的例子我们清楚了，想要让这个预设标记消失光用margin:0;与padding:0;因为如果出现了border的宽度达到一定的数值时这个预设标记还是会出现的。所以正确的写法是：margin:0; padding:0; list-style:none;</span></span></p> <p><span><span></span></span><span><span>虽然预设标记很不错，但是却没办法精确控制，所以在实际应用中并不推荐使用，还是用背景图来代替！</span></span></p> <p></span></span></SPAN> </p> <p>欢迎大家阅读<span style='color:red;'>《Firefox与IE下UL预设标记的异同_html》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/32752.html" target="_blank" title="Firefox与IE下UL预设标记的异同_html">Firefox与IE下UL预设标记的异同_html</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="32752" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/xml" rel="tag">xml</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432144.html" title="Java中如何调用静态方法及非静态方法呢？" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/7.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java中如何调用静态方法及非静态方法呢？" /><br><span class="r_title">Java中如何调用静态方法及非静态方法呢？</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432139.html" title="Java基础类型占用大小说明" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/3.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java基础类型占用大小说明" /><br><span class="r_title">Java基础类型占用大小说明</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432069.html" title="入门：建立百度浏览器应用 -百度浏览器应用开发文档" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=/wp-content/uploads/images/gaodaima/com/hct/1110/u2dwagmxppa582738.png&h=110&w=185&q=90&zc=1&ct=1" alt="入门：建立百度浏览器应用 -百度浏览器应用开发文档" /><br><span class="r_title">入门：建立百度浏览器应用 -百度浏览器应用开发文档</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432051.html" title="scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=/wp-content/uploads/images/gaodaima/com/hct/1110/14twor0h15l072982.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网" /><br><span class="r_title">scrapy提取数据之：xpath选择器_Scrapy1.5中文文档_Scrapy 中文网</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431438.html">Flask框架如何使用HTML模板</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431362.html">django怎么加载html页面</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431346.html">django需要html吗</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431265.html">django如何用css</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431258.html">Django 模板中使用css, javascript</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431256.html">Django怎么加载HTML</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431212.html">django怎么创建css文件夹</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431179.html">django页面跳转HTML怎么写</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">

评论通知

表情贴图加粗删除线居中斜体签到

Hi，您需要填写昵称和邮箱！