2014-02-25 57 views
0

我的website上的商品在Google Chrome瀏覽器中查看時的位置正確,因爲它們應留在商店中並留在深灰色容器內。但是在IE/Mozilla /其他瀏覽器中,它會將項目放下很遠。CSS定位適用於Chrome而不是其他瀏覽器?

body { 
     font-family: Arial, "Free Sans"; 
     margin: 0; 
     padding: 0; 
    } 
    #main { 
     background: #0099cc; 
     margin-top: 0; 
     padding: 2px 0 4px 0; 
     text-align: center; 
    } 
    #main a { 
     color: #ffffff; 
     text-decoration: none; 
     font-size: 12px; 
     font-weight: bold; 
     font-family: Arial; 
    } 
    #main a:hover { 
     text-decoration: underline; 
    } 
    #item_container { 
     width: 200px; 
     margin-left:10px; 
     margin-top: -360px; 
     height:400px; 
     margin-bottom: 10px; 
    } 
    .item { 
     background: #fff; 
     float: left; 
     padding: 5px; 
     margin: 5px; 
     cursor: move; 
     -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     z-index: 5; 
    } 
    .title, .price { 
     display: block; 
     text-align: center; 
     font-size: 14px; 
     letter-spacing: -1px; 
     font-weight: bold; 
     cursor: move; 
    } 
    .title { 
     color: #333; 
    } 
    .price { 
     color: #0099cc; 
     margin-top: 5px; 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
    } 
    .icart, .icart label { 
     cursor: e-resize; 
    } 
    .divrm { 
     text-align: right; 
    } 
    .remove { 
     text-decoration: none; 
     cursor: pointer; 
     font-weight: bold; 
     font-size: 20px; 
     position: relative; 
     top: -7px; 
    } 
    .remove:hover { 
     color: #999; 
    } 
    .clear { 
     clear: both; 
    } 
    #cart_container { 
     margin-top:0px; 
     margin-left:260px; 
     width: 565px; 
    } 
    #cart_title span { 
     border: 8px solid #666; 
     border-bottom-width: 0; 
     background: #333; 
     display: block; 
     float: left; 
     color: #fff; 
     font-size: 11px; 
     font-weight: bold; 
     padding: 5px 10px; 
     -webkit-border-radius: .5em .5em 0 0; 
     -moz-border-radius: .5em .5em 0 0; 
     border-radius: .5em .5em 0 0; 
    } 
    #cart_toolbar { 
     overflow: hidden; 
     border: 8px solid #666; 
     height: 290px; 
     z-index: -2; 
     width: 565px; 
     -webkit-border-radius: 0 .5em 0 0; 
     -moz-border-radius: 0 .5em 0 0; 
     border-radius: 0 .5em 0 0; 
     background: #ffffff; 
    } 
    #cart_items { 
     height: 100%; 
     width: 100%; 
     position: relative; 
     padding: 0 0 0 2px; 
     z-index: 0; 
     cursor: e-resize; 
     border-width: 0 2px; 
    } 
    .back { 
     background: #e9e9e9; 
    } 
    #navigate { 
     width: 545px; 
     margin: 0 auto; 
     border: 8px solid #666; 
     border-top-width: 0; 
     -webkit-border-radius: 0 0 .5em .5em; 
     -moz-border-radius: 0 0 .5em .5em; 
     border-radius: 0 0 .5em .5em; 
     padding: 10px; 
     font-size: 14px; 
     background: #333; 
     font-weight: bold; 
    } 
    #nav_left { 
     float: left; 
    } 
    #nav_left a { 
     padding: 4px 8px; 
     background: #fff; 
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     text-decoration: none; 
     color:#0099cc; 
    } 
    #nav_left a:hover { 
     background: #666; 
     color: #fff; 
    } 
    #nav_right { 
     float: right; 
    } 
    .sptext { 
     background: #ffffff; 
     padding: 4px 8px; 
     margin-left: 8px;    
     -webkit-border-radius: .5em; 
     -moz-border-radius: .5em; 
     border-radius: .5em; 
     color: #666; 
    } 
    .count { 
     color: #0099cc; 
    } 
    .drop-active { 
     background: #ffff99; 
    } 
    .drop-hover { 
     background: #ffff66; 
    } 

回答

0

添加浮點數:留到#item_container。

#item_container { 
    float:left; 
    width: 200px; 
    margin-left:10px; 
    margin-top: -360px; 
    height:400px; 
    margin-bottom: 10px; 
} 
+0

我相信這是必要的,因爲您首先在DOM中有cart_container,並留有餘裕。非webkit瀏覽器(iirc)非常強調DOM訂單,而Chrome則更偏向於原始尺寸。 – Zmart

相關問題