CSS渲染在ul上的不一致性，Firefox是奇数球

本文介绍了CSS渲染在ul上的不一致性，Firefox是奇数球的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述背景我正在使用带有锚点和标题的嵌入无序列表创建辅助导航菜单。使用CSS重置工作表，所有标题和锚点都设置为display：block。当list-style-position：inside被设置时，Firefox和Camino在子弹下方渲染头部和锚点，而Safari，Camino和IE将它们内联。示例屏幕截图示例代码 < html& < head> < style type =text / css> / * css reset * / h1，h2，h3，h4，h5，h6，a {display：block; } / *列表样式* / ul {list-style-position：inside; } < / style> < / head> < body> < ul> < li> < h3>主要< / h3> < ul> < li> < h4>次要< / h4> < ul> < li> < h5>第三级< / h5> < ul> < li>< a href =＃>第三方链接< / a>< / li> < / ul> < / li> < / ul> < / li> < / ul> < / li> < ul> < / body> < / html> 为了让Firefox和Camino渲染和其他人一样，我设置了无序列表，链接到display：inline但我仍然想知道... 问题为什么Firefox& Camino在Safari，Opera和& C的时候将列表项目显示在列表项目下面。 IE会将其正常？解决方案更新这实际上是破碎，自2000年以来。仍然不是固定的。我以为我已经想出来，但这是一个错误，我的部分。静静地！：（答案将list-style的CSS属性设置为disc 回答背景 p>以下@ okw的建议，挖入渲染引擎，我发现我的问题已经报告bugzilla.mozilla.org在2000年4月22日！（* Cough * Um，Mozilla ...这个错误仍然存在。）在 https://bugzilla.mozilla.org/show_bug.cgi?id中报告的错误= 36854 讨论了Mozilla的渲染引擎 Gecko ，在显示列表项标记的同时显示无序列表中的标题时遇到问题，还说明了这个问题：在错误报告线程的底部有一个链接w3c.org文档，让我找到我的修复：有一个建议将CSS列表样式设置为光盘： ul {list-style：disc} 将无序列表列表样式设置为disc已经固定了Gecko渲染引擎浏览器，Firefox & Camino，而在其他浏览器中保持不变。 *注意：虽然光盘是列表样式类型属性，如果list- 解决方案示例代码 < html> < head> < style type =text / css> / * css reset * / h1，h2，h3，h4，h5，h6，a {display：block; } / *列表样式* / ul {list-style-position：inside; list-style：disc;} < / style> < / head> < body> < ul> < li> < h3>主要< / h3> < ul> < li> < h4>次要< / h4> < ul> < li> < h5>第三级< / h5> < ul> < li>< a href =＃>第三方链接< / a>< / li> < / ul> < / li> < / ul> < / li> < / ul> < / li> < ul> < / body> < / html> 我如何感觉找到自己问题的答案我终于可以睡觉了; ） BackgroundI was creating a secondary navigation menu using embedded unordered lists with anchors and headers. Using a CSS reset sheet all headers and anchors are set to "display: block". When list-style-position: inside is set Firefox and Camino render the headers and anchors below the bullet while Safari, Camino, and IE render it inline.Example Screen ShotsExample Code<html><head> <style type="text/css"> /* css reset */ h1, h2, h3, h4, h5, h6, a { display: block; } /* list styling */ ul { list-style-position: inside; } </style></head><body><ul> <li> <h3>Primary</h3> <ul> <li> <h4>Secondary</h4> <ul> <li> <h5>Tertiary</h5> <ul> <li><a href="#">Tertiary Link</a></li> </ul> </li> </ul> </li> </ul> </li><ul></body></html>To get Firefox and Camino to render the same as the others I set the unordered lists, headers, and links to "display: inline" but I still want to know...QuestionWhy does Firefox & Camino render the list item below the list bullet when Safari, Opera, & IE render it "normal"? 解决方案 UpdateThis is actually broken and has been since 2000. Still not fixed. I thought I had figured it out but it was a mistake on my part. STILL BROKEN! :(AnswerSetting the CSS property of "list-style" to "disc" will cause the Firefox and Camino rendering engine, Gecko, to render the headers inside an unordered list "normal".Answer BackgroundAfter following @o.k.w's advice of digging into the rendering engine I found that my problem had been reported on bugzilla.mozilla.org on April 22, 2000! (*Cough* Um, Mozilla... the bug is still there.) The reported bug at https://bugzilla.mozilla.org/show_bug.cgi?id=36854 discusses the fact that Mozilla's rendering engine, Gecko, has a problem displaying headers in an unordered list while displaying the list item marker inside. It also says about this problem:At the bottom of the bug report thread there is a link a w3c.org document that led me to find my fix:At the bottom of that document there is a suggestion to set the CSS list-style to disc:ul { list-style: disc }Setting the unordered list list-style to "disc" has "fixed" the rendering problem in Gecko rendering engine browsers, Firefox & Camino, while leaving the lists unchanged in other browsers. *Note: Although "disc" is a list-style-type property, if "list-style-type: disc" is used instead of "list-style: disc" it does not fix the problem.Solution Example Code<html><head> <style type="text/css"> /* css reset */ h1, h2, h3, h4, h5, h6, a { display: block; } /* list styling */ ul { list-style-position: inside; list-style: disc;} </style></head><body> <ul> <li> <h3>Primary</h3> <ul> <li> <h4>Secondary</h4> <ul> <li> <h5>Tertiary</h5> <ul> <li><a href="#">Tertiary Link</a></li> </ul> </li> </ul> </li> </ul> </li> <ul></body></html>How I feel finding the answer to my own questionI can finally sleep ; ) 这篇关于CSS渲染在ul上的不一致性，Firefox是奇数球的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！