CSS渲染不一致的ul与Firefox是奇怪的球
Mik*_*ace 22 html css debugging
背景
我正在使用带有锚点和标题的嵌入无序列表创建辅助导航菜单.使用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; }
/* 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>
为了让Firefox和Camino呈现与其他人一样的颜色,我将无序列表,标题和链接设置为"display:inline",但我仍然想知道......
题
当Safari,Opera和IE使其"正常"时,为什么Firefox&Camino会在列表项目符号下面呈现列表项？
Mik*_*ace 29
更新
这实际上是破碎的,自2000年以来.仍然没有修复.我以为我已经弄明白了,但这是我的错误.仍然破产!:(
回答
将"list-style"的CSS属性设置为"disc"将导致Firefox和Camino渲染引擎Gecko在无序列表"正常"内呈现标题.
答案背景
按照@ okw关于挖掘渲染引擎的建议后,我发现我的问题已于2000年4月22日在bugzilla.mozilla.org上报告了!(*咳嗽*嗯,Mozilla ......这个bug仍然存在.)https://bugzilla.mozilla.org/show_bug.cgi?id=36854报告的错误讨论了Mozilla的渲染引擎Gecko有一个在内部显示列表项标记时,在无序列表中显示标题的问题.它还谈到了这个问题:
"这实际上似乎是一个主要的CSS1合规问题......" - David Baron
在错误报告线程的底部有一个链接w3c.org文档,导致我找到我的修复:
"CSS 2.0建议中有一个描述:http: //www.w3.org/TR/CSS2/generate.html#q11告诉我们Gecko的行为是错误的." - Listy Blaut
在该文档的底部有一个建议将CSS列表样式设置为光盘:
ul { list-style: disc }
将无序列表列表样式设置为"disc"已经"修复"了Gecko渲染引擎浏览器Firefox和Camino中的渲染问题,同时在其他浏览器中保持列表不变.*注意:虽然"disc"是list-style-type属性,但如果使用"list-style-type:disc"而不是"list-style:disc",则不能解决问题.
解决方案示例代码
<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>
我如何找到自己问题的答案
我终于可以睡觉了; )
- 赞成纯粹的照片证据.多德; 那只是让我成为这个半球最受欢迎的人=) (2认同)
- 所以,在对我自己的答案进行一些更多的回顾后,看起来我对渲染引擎有关于渲染的错误是正确的.将UL列表样式设置为光盘然而实际上并没有解决问题,它只是使它看起来像它.除了使用不同的html布局来实现类似的效果之外,此时看起来没有解决此问题的方法.; d (2认同)
因为标题是块元素，因此被推到下一行（因为显示为block（或没有其他指定的display-type [ inline-block、inline等...] 的块级元素）无法共享一行；我不知道根据规范，列表元素是否应该（或不应该）在其内部包含块级元素，或者是否应该假定它与所包含的元素“共享”行。
不过，对于这一切，我可能是错的；这是我能想到的唯一解释。
您还可能会发现 Firefox 中的标题元素应用了默认的边距、填充或定位。您可以使用 Firebug（或替代方案）进行测试以查看定位来自何处。
编辑
将您的代码复制粘贴到我的模板文件中并在 FF3.0.10 中查看后，我没有看到您报告的问题。我使用的结果代码粘贴在下面，如果您还没有解决这个问题，请尝试下面的代码，看看问题是否仍然存在：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title><link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css">
/* css reset */
h1, h2, h3, h4, h5, h6, a { display: block; }
/* list styling */
ul { width: 14em; margin: 1em auto;}
</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>
| 归档时间： |
|
| 查看次数： |
8964 次 |
| 最近记录： |