- Регистрация
- 3 Авг 2008
- Сообщения
- 104
- Реакции
- 20
- Автор темы
- Заблокирован
- #1
В хроме бэкграунд с круглыми уголками отображается нормально. Проблема с IE 9(на более низких версиях пока не тестил). Он не видит цвет фона и не закругляет уголки у блока, который скрыт(не закругляет при его раскрытии, а должен, ведь это прописано в стиле). Если же этот блок(<div class="round"></div>) из display: none вынуть наружу, то всё работает корректно. Единственное, что пока придумал, так это дописать в стиле !important к фоновому цвету.
В представленном примере это не дописано, соответственно, после нажатия в IE вы ничего не увидите(фон-то не прочитался). При дописывании же в стиль !important блок в IE становится видно(когда происходит нажатие на ссылку "нажать сюда"). Однако, круглые уголки всё-равно не отображаются(так и остаются квадратными). В других браузерах всё работает корректно(круглые).
Наглядно в приложенном примере или :
В связи с этим вопрос: Возможно ли данный баг как-то исправить на основе текущего примера? Либо заменить другим решением, с помощью которого можно было бы скрывать и открывать элемент(кроссбраузерно). Под элементом подразумевается текущий стиль .round и соответствующий ему див <div class="round"></div>. Именно его надо надо раскрывать и прятать.
Код:
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> </p><p> </p>
<div class="round"></div>
</div>
</BODY>
</HTML>
В связи с этим вопрос: Возможно ли данный баг как-то исправить на основе текущего примера? Либо заменить другим решением, с помощью которого можно было бы скрывать и открывать элемент(кроссбраузерно). Под элементом подразумевается текущий стиль .round и соответствующий ему див <div class="round"></div>. Именно его надо надо раскрывать и прятать.
Вложения
Последнее редактирование: