Chrome 和 Safari 读取 CSS 的方式不同？

Posted 2023-03-11

【中文标题】Chrome 和 Safari 读取 CSS 的方式不同？

【英文标题】：Chrome and Safari reading CSS differently?

【发布时间】：2013-04-25 07:56:14

【问题描述】：

没想到我会这么说，但谷歌浏览器实在是太烦人了。

我正在尝试在网页上创建一个小画廊，并在 Safari 上显示 100% 正确且形状紧凑：

然而，当在谷歌浏览器上加载同一页面时，它非常偏离中心。

但是，在我的 iPhone 上使用 Google Chrome 时，它​​的显示效果也很好。

这是 javascript 库的 CSS 表部分。

#slideshow list-style:none; color:#fff
#slideshow span display:none
#wrapper width:725px; margin:50px auto; display:none
#wrapper * margin:0; padding:0
#fullsize position:relative; width:720px; height:540px; padding:2px; border:1px solid         #ccc; background:#000
#information position:absolute; bottom:0; width:720px; height:0; background:#000;   color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)
#information h3 padding:4px 8px 3px; font-size:14px
#information p padding:0 8px 8px
#image width:720px
#image img position:absolute; z-index:25; width:auto
.imgnav position:absolute; width:25%; height:306px; cursor:pointer; z-index:150
#imgprev left:0; background:url(gallery/images/left.gif) left center no-repeat
#imgnext right:0; background:url(gallery/images/right.gif) right center no-repeat
#imglink position:absolute; height:306px; width:100%; z-index:100; opacity:.4;   filter:alpha(opacity=40)
.linkhover background:url(images/link.gif) center center no-repeat
#thumbnails margin-top:15px
#slideleft float:left; width:20px; height:81px; background:url(gallery/images/scroll-  left.gif) center center no-repeat; background-color:#222
#slideleft:hover background-color:#333
#slideright float:right; width:20px; height:81px; background:#222     url(gallery/images/scroll-right.gif) center center no-repeat
#slideright:hover background-color:#333
#slidearea float:left; position:relative; width:675px; margin-left:5px; height:81px;  overflow:hidden
#slider position:absolute; left:0; height:81px
#slider img cursor:pointer; border:1px solid #666; padding:2px

我在 iMac 上查看此网站，但在 Windows 上使用 Firefox 时它也偏离中心，所以我可以在 CSS 表中重新格式化以跨浏览器工作吗？

提前致谢。 卢克

【问题讨论】：

这是我可以看的地方吗？

只有 CSS 是不够的。也发布 html 并创建一个 jsfiddle。

您是否尝试过清除 Chrome 上的缓存？有时它会变得有点“粘”。值得通过检查器 ([cmd]+[alt]+[i]) 检查正在加载的 css 是否与您认为应该加载的内容相匹配。

由于 Apple 的限制，iDevices 上的 Chrome 实际上是 Safari Mobile（可能禁用了某些功能）。如果您能提供一个链接或更好的fiddle 以便人们可以结帐，那就太好了。

【参考方案1】：

我建议使用reset.css 样式表让浏览器以同样的方式看到它。

在链接到您自己的样式表之前先链接到该样式表，这可能会产生一些变化，但是您可以尝试使用它，然后它应该在所有浏览器中看起来都一样。

另外一个好方法是检查浏览器是否支持您正在使用的 css。

【参考方案2】：

感谢大家的回复。 我会发布实时链接，但它还没有仅在本地发布。

但是我已经解决了这个问题。

对于看到这一点并需要帮助的任何人，这里是这一行：

#image img position:absolute; z-index:25; width:auto

加入left:0; top:0; to line 告诉 img 对齐到父 div 的角落

所以现在是行

#image img position:absolute; left:0; top:0; z-index:25; width:auto

再次感谢大家。