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

【问题标题】：Chrome and Safari reading CSS differently?Chrome 和 Safari 读取 CSS 的方式不同？
【发布时间】：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 以便人们可以结帐，那就太好了。

标签： javascript html css alignment

【解决方案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}

再次感谢大家。

【讨论】：