css - magento - 默认主题在 webkit 上增加 1px

Question

Magento(版本 1.6.0.0)默认前端主题/皮肤，

在 Chrome 14.0/Safari 5.1 [Win7 32x] 中有 1px 的空白区域，

在 Firefox、Opera 和 IE 中看起来不错。

当然，您可以在 http://demo.magentocommerce.com/ 上亲眼看到它

非常沮丧，我正在努力解决这个问题。如我所见...

/* skin/frontend/default/default/css/styles.css, line 100 */

.main { 
   width:900px; 
   margin:0 auto; 
   min-height:400px; 
   padding:25px 25px 80px; 
   background:#fffffe url(../images/bkg_main2.gif) 0 0 no-repeat; 
   text-align:left; 
}

.main div 宽度为 950px。

bkg_main2.gif 962px 宽 653px 高，但左右两侧有 6px 的阴影，中间空白为 950px 宽。

所以，一切都应该没问题。

知道问题出在哪里吗？!谢谢你的好主意。

Answer 1

以下应该可以解决问题:

@media screen and (-webkit-min-device-pixel-ratio:0) {
.main { background: url("../images/bkg_main2.gif") no-repeat scroll -1px 0 #FFFFFE; }
}

这应该可以更正所有 webkit 浏览器的背景对齐方式。让我知道进展如何