0

Когда устанавливаю css свойство overflow:hidden для элементов с position:relative и с установленным border-radius, то во всех браузерах всё отрабатывает нормально, а в safari внутренний выступающий элемент обрезается так, как будто свойство border-radius не установлено...

Подскажите, пожалуйста, как вылечить эту проблему для safari?

Вот пример на котором видна проблема:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <style type="text/css">
    .ttitle {
        position: relative;
        top: 0px;
        left: 300px;
        height: 54px;
        width: 10160px;
        background-color: #0F0;
        overflow: hidden;
    }
    .tabs {
        width: 1010px;
        height: 580px;
        position: relative;
        background-color: #000;
        borderm-width: 0px;
        border-radius: 250px;
        border-style: solid;
        overflow: hidden !important;
    }
    </style>
    </head>
    <body>
    <divclass="tabs">
        <divclass="ttitle">
        </div>
    </div>
    </body>
</html>
1
  • Использовать html5?
    – Qwertiy
    23 янв 2017 в 15:17

1 ответ 1

1

http://jsfiddle.net/vn9bZ/

.tabs{         
    width: 1010px; 
    height: 580px;           
    background: #000;            
    border-style: solid;       
    border-radius: 250px;           
    overflow: hidden;     
}

.ttitle{    
    margin-left: 300px;
    height: 54px;
    width: 10160px;
    background: #0F0;
    overflow: hidden;  
}
<div class="tabs">
    <div class="ttitle" ></div> 
</div>

1
  • без position то работает, но мне нужно, как то сделать, что бы c relativ и absolute работало.... У меня там просто на страницы этот элемент абсолютно позиционируется....
    – shc345
    20 апр 2014 в 17:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.