2012-10-24 2 views
0

내 고객이 이상한 레이아웃의 사이트가 있고 잘 개발했습니다.Chrome에서 콘텐츠의 오버 플로우가 div 범위에 있음

Chrome (버전 22)이 작동하지 않지만 Firefox (버전 16) 및 IE 9에서 문제가 발생합니다.

문제는 colRight에 있으며, 반경을 고려하지 않는 두 개의 div이 있습니다. 콘텐츠가 오버플로되어 colCenter을 넘습니다.

어떻게 해결할 수 있습니까?

JSFIDDLE

FIREFOX :

enter image description here

크롬 enter image description here

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

이 질문은에 의존해서는 안 미래에 유용한 외부 링크의 상태. 질문에 코드를 포함하십시오. http://sscce.org/ – Sparky

+0

을 참조하십시오. 감사합니다. 내 질문에 모든 코드를 추가했습니다. –

+0

알겠습니다. 감사합니다. – Sparky

답변

1
+0

내 경우 래퍼가 모든 열입니까? (colRight 예를 들어?) –

+0

jsfiddle 만들 수 있지만 열은 내처럼 둥근? 그 문제가 있기 때문에 –

+0

시도했지만 반올림 작동하지 않습니다 : http://jsfiddle.net/D66qE/13/ –

관련 문제