Проблемы с background-color и display: none в IE

konoplya

Постоялец
Заблокирован
Регистрация
3 Авг 2008
Сообщения
104
Реакции
20
  • Автор темы
  • Заблокирован
  • #1
В хроме бэкграунд с круглыми уголками отображается нормально. Проблема с IE 9(на более низких версиях пока не тестил). Он не видит цвет фона и не закругляет уголки у блока, который скрыт(не закругляет при его раскрытии, а должен, ведь это прописано в стиле). Если же этот блок(<div class="round"></div>) из display: none вынуть наружу, то всё работает корректно. Единственное, что пока придумал, так это дописать в стиле !important к фоновому цвету.

Код:
background-color:#F7F6ED !important;

В представленном примере это не дописано, соответственно, после нажатия в IE вы ничего не увидите(фон-то не прочитался). При дописывании же в стиль !important блок в IE становится видно(когда происходит нажатие на ссылку "нажать сюда"). Однако, круглые уголки всё-равно не отображаются(так и остаются квадратными). В других браузерах всё работает корректно(круглые).

Наглядно в приложенном примере или :

Код:
<HTML>
<HEAD>
<TITLE>Primer</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
    .round {
    width: 252px;
    height: 58px;
    float: left;
    background-color: #36A3D0;
 
    background-repeat: no-repeat;
    background-position: 184px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    behavior: url(http://curved-corner.googlecode.com/files/border-radius.htc);
    } 
-->
</style>

<script>function view(n) {
    style = document.getElementById(n).style;
    style.display = (style.display == 'block') ? 'none' : 'block';
}</script>

</HEAD>
<BODY>
<a href="#hidden1" onclick="view('hidden1'); return false">Нажать сюда</a>
<div id="hidden1" style="display: none;">
<p>&nbsp;</p><p>&nbsp;</p>
<div class="round"></div>
</div>

</BODY>
</HTML>

В связи с этим вопрос: Возможно ли данный баг как-то исправить на основе текущего примера? Либо заменить другим решением, с помощью которого можно было бы скрывать и открывать элемент(кроссбраузерно). Под элементом подразумевается текущий стиль .round и соответствующий ему див <div class="round"></div>. Именно его надо надо раскрывать и прятать.
 

Вложения

  • primer.zip
    1,1 KB · Просмотры: 1
Последнее редактирование:
Назад
Сверху