我有一个布局奇怪的网站(由我的客户提供),并且开发得很好。
问题是 Chrome(版本 22)不起作用,但在 Firefox(版本 16)和 IE 9 中它可以工作。
问题出在colRight
,有两个div
s不尊重半径,内容溢出,越过了colCenter
。
我该如何解决?
火狐:
铬合金
HTML:
<div class="colCenter" id="two"></div>
<div class="colRight" id="three">
<div class="first_menu"></div>
<div class="dati_societari"></div>
</div>
CSS:
.colCenter{
position:absolute;
top:0;
left:18%;
height: 100%;
width: 72%;
background: #ccc;
border-left: 0px solid #333;
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
/*border-radius: 0.2px 0px 0px 0.2px;*/
z-index:100;
overflow:hidden !important;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
}
.colRight{
position:absolute;
top:0;
right:0;
background:#fff;
height:100%;
width:18%;
z-index:1000;
border-left: 0px solid #333;
/*border-radius: 70px 0px 0px 70px / 250px 0px 0px 250px;*/
border-radius: 280px 0px 0px 280px / 1000px 0px 0px 1000px;
box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-webkit-box-shadow:-5px -1px 8px rgba(0,0,0,0.4);
-moz-box-shadow: -5px -1px 8px rgba(0,0,0,0.4);
overflow:hidden !important;
}
.first_menu{
height:10%;
width:100%;
background:#714d8f;
position:absolute;
top:0;
left:0;
z-index:2;
}
.dati_societari{
height:8%;
width:100%;
background:#9a9a9a;
position:absolute;
bottom:50px;
left:0;
z-index:2;
text-align:center;
}
.social{
position:absolute;
width:100%;
bottom:5%;
left:20%;
}
.img_social{
opacity:0.7;
transition-property: opacity; /*standard*/
transition-duration: 0.4s;
-webkit-transition-property: opacity; /*Safari e Chrome */
-webkit-transition-duration: 0.4s;
-o-transition-property: opacity; /*Opera*/
-o-transition-duration: 0.4s;
-moz-transition-property: opacity; /*Firefox*/
-moz-transition-duration: 0.4s;
}