Jump to content
  • 0

В Ie Не Отображаются Скругления. Помогите Исправить


idimok
 Share

Question

в IE d6317ae03bd8188dc119466af9452c27.png

должно быть так f758ccedae6ef5710da10d5bda73a1a8.png

HTML и css код

<div id="ins">
<a style="margin: 0pt 13px;" href=" "><span class="l"></span><span class="c"></span>Текст1 <span class="r"></span></a>
<a style="margin: 0pt 13px;" href="/url/"><span class="l"> </span><span class="c"></span>текст2<span class="r"> </span></a>
<a style="margin: 0pt 13px;" href="/url/"><span class="l"> </span><span class="c"></span>текст3<span class="r"> </span></a>
</div>

#ins {
height:20px;
position:absolute;
text-align:center;
top:93px;
width:100%;
}
#ins a {
background:url('../images/inset_center.png') repeat-x scroll center top transparent;
font-weight:bold;
margin:11px;
outline:medium none;
padding:6px 0;
text-decoration:none;
color:#016dc1
}

#ins a .l {
background:url('../images/inset_left.png') no-repeat scroll 0 0 transparent;
margin-left:-12px;
padding:6px 0 6px 12px;
}
#ins a .r {
background:url('../images/inset_right.png') no-repeat scroll right top transparent;
margin-right:-12px;
padding:6px 0 6px 12px;

Помогите исправить

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

Вот знаете, чего я не понимаю?

Стремления к громоздким навороченным решениям.

Конечно же, можно взять ваш вариант, и кое-как подточить его, подпилить, чтобы он хоть как-то хоть где-то отображался более-менее адекватно.

Пример. Отображается как задумано только в последних версиях браузеров.

А можно выкинуть всё лишнее.

Вот какую смысловую нагрузку несут эти span'ы внутри <a>?

Никакой. Только всё портят. Кстати, в последних версиях заработало только после того, как был выкинут средний span. Почему — не знаю. Он там вообще был исключительно мусором и никакой роли по идее не должен был играть.

А что есть меню по сути своей?

Правильно, это список ссылок.

Так и запишем:

<ul>
<li><a href="/">Текст1</a></li>
<li><a href="/">Текст2</a></li>
<li><a href="/">Текст3</a></li>
</ul>

И всё. Больше ничего не надо.

Получаем пять строк легкочитаемого кода вместо невнятной каши.

И вот такую конструкцию уже можно оформлять.

Да, понимаю, хочется идеальной кроссбраузерности, а ещё слишком распространены убогонькие IE8-, которые почти ничего не умеют.

Поэтому используем картинки. Только используем две картинки общим весом 2.4кб вместо трёх картинок общим весом 3.4кб — поэкономим трафик посетителя и избавим сервер от одного лишнего http-запроса.

В css напишем только самый необходимый минимум и получим вот что.

Более простая конструкция сама собой стала работать в IE6+, FF3, Opera10, Safari и Chrome любых версий.

Чудеса? Не иначе.

А всё это очень сильное колдунство состоит в безжалостном отношении к хламу. В коде не должно быть ничего лишего. Тогда он работает стабильно.

И да, если критично, чтобы работало в FF2, добавьте display: -moz-inline-stack для li. Но доля FF2 настолько мала, что можно пренебречь.

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

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

Да-да, я о тех двух картинках. Они не нужны. Что они делают? Скругляют уголки? Для этого есть border-radius. Рисуют градиенты? Для этого тоже есть решения, хотя они и уникальны для каждого браузера.

Итак, выкидываем лишний груз, дописываем несколько строк в css, и получаем по-настоящему правильный вариант.

Посетитель приходит за информацией, а не на уголки с градиентами любоваться, поэтому пользователи IE не обидятся на отсутствие скруглений, а пользователи Оперы не обидятся на отсутствие еле заметного градиента.

А вот нагрузка на сервер при этом сократится в полтора раза, трафик у посетителя при этом сократится более чем вдвое.

Думайте сами, решайте сами.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy