gpt4 book ai didi

javascript - CSS 定位适用于 chrome 但不适用于其他浏览器?

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

我的 website 上的元素在 Google Chrome 中查看时位置正确,因为它们应该留在商店盒子里并留在深灰色容器内。但在 IE/Mozilla/其他浏览器中,它会将元素降到很低的位置。

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;
}

最佳答案

将 float:left 添加到 #item_container。

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

关于javascript - CSS 定位适用于 chrome 但不适用于其他浏览器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22028319/

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