내 고객이 이상한 레이아웃의 사이트가 있고 잘 개발했습니다.Chrome에서 콘텐츠의 오버 플로우가 div 범위에 있음
Chrome (버전 22)이 작동하지 않지만 Firefox (버전 16) 및 IE 9에서 문제가 발생합니다.
문제는 colRight
에 있으며, 반경을 고려하지 않는 두 개의 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 :
012 3,516,.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;
}
이 질문은에 의존해서는 안 미래에 유용한 외부 링크의 상태. 질문에 코드를 포함하십시오. http://sscce.org/ – Sparky
을 참조하십시오. 감사합니다. 내 질문에 모든 코드를 추가했습니다. –
알겠습니다. 감사합니다. – Sparky