скругленные углы IE и фоновые изображения - PullRequest
Новая
       1

скругленные углы IE и фоновые изображения

3 голосов
/ 29 июля 2010

У меня есть элемент на моей странице, таким образом: 

<div class="rounded">
<h2>Heading Text</h2>
<ul>
    <li><a href="/default.aspx">Summary link</a></li>
    <li><a href="/default.aspx">Summary link</a></li>
    <li><a href="/default.aspx">Summary link</a></li>
</ul>
<p>or... some text or whatever</p>
</div>

стили, связанные с этим блоком: 

.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
}

.rounded h2{
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
border-top-left-radius:5px;
background:url("wide_rl_fade.png") repeat-y scroll right top transparent;
color:#C4161C;
font-size:130%;
padding:10px 20px;
text-align:left;
text-transform:uppercase;
}

конечно, это работает удовольствие в FF и сафари (и опере) .. но IE ничего не делает (как я ненавижу IE) я немного искал и нашел решение DD_roundies .. http://www.filamentgroup.com/lab/achieving_rounded_corners_in_internet_explorer_for_jquery_ui_with_dd_roundi/ но, к сожалению, это просто удаляет фоны и, таким образом, отображает список и заголовок текста с прозрачным фоном - прекрасно работает, когда непрозрачность или изображения bg не используются, но это, очевидно, не устраивает мою проблему Кто-нибудь знает решение этой проблемы? я, конечно, мог бы отказаться от изображения bg, но это, казалось, самый надежный способ заставить непрозрачность работать во всех браузерах ..

спасибо

нац

Ответы [ 3 ]

1 голос
/ 29 июля 2010

Стиль, который вы используете для закругленных углов, распознается только браузерами Firefox и Webkit. Единственное другое решение, которое у вас есть, - это использование фоновых изображений. Был плагин jQuery, который я использовал, который был довольно приятным, но опять же, для Internet Explorer он просто размещает изображения по углам, чтобы получить округлую иллюзию. Вот оно: http://jquery.malsup.com/corner/

РЕДАКТИРОВАТЬ: CSS3 будет иметь тег, который достигает этого, но он все еще не поддерживается ни одной текущей версией IE: http://www.w3.org/TR/css3-background/#the-border-radius

0 голосов
/ 29 июля 2010

на самом деле не ответ .. не стреляйте в меня, но нужно больше символов, чем позволяют комментарии

спасибо за ответы ..

еще раз, хотя это, похоже, не работает с фонами, являющимися alpha'd png's что стыдно, так как это оказалось именно то, что мне нужно .. пытался 

.rounded{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:url("10x10.50percentalpha_white.png") repeat scroll left top transparent;
height:270px;
overflow:hidden;
padding:0 0 5px;
behaviour: url(path/to/PIE.htc)
}

Я использую альфа-фоновое изображение для обозначения opcatiy или чего-то еще в div, а затем альфа-содержимое тоже .. не хочу этого ..

какие-либо другие предложения? если кто-то не может объяснить способ получить фон в альфа-формате, не затрагивая буквальность текста / контента.

со всем финансированием, которое есть у M $, почему они не могут получить закругленные углы, работающие как все остальные, а? tossers - всегда тратьте столько времени на то, чтобы в IE все работало так, чтобы оно работало везде ...

0 голосов
/ 29 июля 2010

Посмотрите http://css3pie.com/ он использует присоединенное поведение, чтобы дать IE некоторые возможности css3.

...