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

Тема в разделе "Верстка", создана пользователем konoplya, 13 авг 2019.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. konoplya

    konoplya Постоялец

    Регистр.:
    3 авг 2008
    Сообщения:
    104
    Симпатии:
    18
    В хроме бэкграунд с круглыми уголками отображается нормально. Проблема с 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 КБ
      Просмотров:
      0
    Последнее редактирование: 14 авг 2019