Div округленный угол в IE (6/7) - PullRequest
Новая
       1

Div округленный угол в IE (6/7)

2 голосов
/ 11 апреля 2011

Вот код округленного div. Все работает отлично, кроме IE (6/7), даже в IE (8/9) это довольно хорошо, и, очевидно, другие браузеры выглядят хорошо на округленном div. Описано позже после кода.

HTML-код: 

<div id="tweets">
    <div id="tweets_text">
        <div id="tweets_text_top">
            <div id="tweets_top_left">
            </div><!--#tweets_text_left-->                          
            <div id="tweets_top_right">
            </div><!--#tweets_text_right-->
        </div><!--#tweets_text_top-->                       
        <div id="tweets_text_middle">
            TeXt HeRe....
        </div><!--#tweets_middle-->                     
        <div id="tweets_text_bottom">
            <div id="tweets_bottom_left">
            </div><!--#tweets_text_left-->                          
            <div id="tweets_bottom_right">
            </div><!--#tweets_text_right-->
        </div><!--#tweets_text_bottom-->                    
    </div><!--#tweets_text-->               
</div><!--#tweets-->

Код CSS: 

#tweets{
    clear: both;
    margin-bottom: 10px;
    padding: 0px;
    border: 0px;
}
#tweets_text{
    width:214px;    
    clear: both;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background: #141414;
}
#tweets_text_top, #tweets_text_bottom{
    width: 214px;
    height: 10px;
    background: #000000;    
    clear: both;    
}
#tweets_top_left{
    height: 10px;
    width: 10px;
    background: url('images/top_left.jpg') no-repeat;   
    float: left;
    clear: left;
}
#tweets_top_right{
    height: 10px;
    width: 10px;
    background: url('images/top_right.jpg') no-repeat;
    float: right;
    clear: right;
}
#tweets_bottom_left{
    height: 10px;
    width: 10px;
    background: url('images/bottom_left.jpg') no-repeat;
    float: left;
    clear: left;
}
#tweets_bottom_right{
    height: 10px;
    width: 10px;
    background: url('images/bottom_right.jpg') no-repeat;
    float: right;
    clear: right;   
}
#tweets_text_middle{    
    width: 200px;
    padding: 7px;
    background: #000000;
    color: #f4f4f4;
    font-size: 12px;    
}

Изображения здесь: округленные изображения div

Теперь это происходит только в IE (6/7). Нижняя часть не округлена, как верхняя часть. Если вы проверите, надеюсь, вы найдете то, что я просил. Если кто-нибудь найдет ошибку, я буду благодарен.

Если у вас есть какие-либо проблемы с тем, чтобы понять или получить документы, дайте мне знать.

Спасибо.

Ответы [ 3 ]

2 голосов
/ 11 апреля 2011

Вот очень популярный плагин jQuery за углом.

http://jquery.malsup.com/corner/

Поддерживается во всех браузерах, включая IE6.Он рисует углы в IE, используя вложенные элементы div (не изображения).Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome).Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как его использовать

Вам необходимо включить jQuery и js-скрипт Corner перед </body>.Затем напишите свой jQuery как $ ('div, p'). Corner ('10px');и поставить перед ''.Таким образом, ваш HTML будет выглядеть как приведенный ниже код.Здесь я делаю круглые углы для всех тегов div и p.Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Проверить рабочий пример на http://jsfiddle.net/VLPpk/1

1 голос
/ 11 апреля 2011

Это отличный инструмент для скругления углов между браузерами: http://css3pie.com/

Он специально создан для обработки IE6-8, которая не поддерживает скругление углов CSS.

0 голосов
/ 22 марта 2012

Используйте код в CSS для округления. 

border-radius:7px 7px 7px 7px;
...