私は(私のクライアントによって)奇妙なレイアウトのサイトを持っていて、それをうまく開発しました。
問題は、Chrome(バージョン22)が機能しないことですが、Firefox(バージョン16)とIE9では機能します。
問題はにあります。半径を尊重しないcolRight
2つのがあり、コンテンツがオーバーフローしてを超えます。div
colCenter
どうすれば修正できますか?
FIREFOX:
クロム
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;
}