gpt4 book ai didi

html - 是什么导致 Webkit 和 Gecko + Trident 之间的渲染差异?

转载 作者:行者123 更新时间:2023-11-28 14:43:36 24 4
gpt4 key购买 nike

我已将此提交给 Webkit bugzilla (including full CSS and HTML)一周前,但到目前为止还没有收到回复。与此同时,我想知道是我还是 Webkit 在做一些奇怪的事情。 我已经找到了解决方法,只是在寻找有关确切导致这种差异的原因的答案。

这是我遇到的情况:
(来源:mindcontrolled.nl)

在 Chrome 10.0.648.204、Safari 5.0.3 (7533.19.4)、Firefox 4.0 和 IE 8 版本中测试。

这是相关代码。我已经在 HTML 中隔离了这段代码,以查看是否周围的对象导致了问题,但问题仍然存在。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[...]

<div id="top">
<div id="logo">
<a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
</div>

<div id="topmenu">
<ul>
<li><a href=""><span>over</span> ons</a></li>
<li><a href=""><span>onze</span> partners</a></li>
<li><a href="">contact</a></li>
<li><a href="">helpdesk</a></li>
</ul>
</div>

<div style="clear: both;"></div>
</div>

还有 CSS:

#container, #top, #contentcontainer {
padding: 12px;
}

#logo {
float: left;

margin: 0;

font-size: 2em;
letter-spacing: -2px;
}

#topmenu ul, #mainsubmenu ul {
margin: 0;
padding: 0;

list-style-type: none;
}

#topmenu li, #mainsubmenu li {
display: inline;
}

#topmenu li {
margin-left: 20px;
}

#topmenu li:first-child {
margin-left: 0;
}

#topmenu a {
color: #005288;
}

#topmenu a:hover {
color: #00aeef;
}

#topmenu a span {
color: #005288;
}

我首先测量所有 div,看看它们在 Gecko 和 Webkit 中是否具有相同的、自动计算的尺寸,并且它们都具有完全相同的宽度测量值(当然 Webkit 上的高度不同)。在 Chrome 的 Firebug lite 和 Firefox (4) DOM-inspector 中是 390 px。

即使这 390 像素不足以容纳整个列表,div 也可以简单地向左扩展。当字体呈现略有不同或

同样奇怪的是,如果我删除

#topmenu li:first-child {
margin-left: 0;
}

从 CSS 来看,这对列表中第一个元素的位置没有任何影响。相反,它改变了 second 行中 LI 的位置!奇怪的是,“Helpdesk”随后将与“Over ons”保持一致。

我的解决方法:如果我为顶部菜单 DIV 定义的固定宽度至少为 390(当前宽度)加上 20 像素(我使用 first-child 删除的边距),最小总固定宽度为 410 像素,则所有元素都保持在同一行上。

很想听听大家对此的看法。

最佳答案

我创建了 a jsfidle并在 Chrome 和 Firefox 中对其进行了测试,但我无法重现您的发现。与您发布的片段相比,您是否有更多/不同的 html/css?我在两种浏览器中得到的结果基本相同,#topmenu li:first-child 上应用的边距也做了它应该在两种浏览器中做的事情。

我在装有 Snow Leopard 的 Mac 上安装了 Chrome 10 和 Firefox 3.6.16。

这是 Chrome:

enter image description here

和火狐:

enter image description here

关于html - 是什么导致 Webkit 和 Gecko + Trident 之间的渲染差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5600390/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com