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 that you have read and understand our privacy policy and code of conduct.

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