Arhn - архитектура программирования

проблема со встроенным div в ie7

Я создал простой виджет в JQuery, который заключает текстовые поля в div, добавляет кнопку с открытым текстом и заполнитель. Добавил основные биты для этого на http://jsfiddle.net/BpkDN/, что-то в CSS, которое я не может найти, портит стиль в ie7. Кажется, работает в любой другой версии.

Вот выдержка из того, что производит мой виджет:

CSS:

 ::-ms-clear {
      display: none;
  }
.jui-textbox {
    border: 1px solid #DADADA;
    position: relative;
    padding:0 !important;
    white-space: nowrap;
    background: #fff;
    overflow: hidden;
    height: 33px;
    line-height: 33px;
    display: inline-block;
    *display:inline;
    margin: 10px 0;

}

.jui-textbox input {
    background-color: transparent;
    color: #313131;
    height: 33px !important;
    line-height:33px\9;
    width: 300px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    padding: 0;
    margin: 0 5px !important;
    border: none;
    float:left;
}

.jui-textbox-placeholder {
    position: absolute;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    color: #A1A1A1;
    height: 33px;
    line-height: 33px;
    padding: 0;
    margin: 0;
    left: 5px;
    overflow: hidden;
    cursor: text;
}


.jui-textbox-hover {
    border: 1px solid #CACACA;
}
.jui-textbox-active {
    border: 1px solid #a1a1a1;
}

.jui-textbox-clear.show{
    display:inline-block !important;
    *display:inline !important; 
}
.jui-textbox-clear {
    display:none;
    cursor: pointer;
    background: #fff;
    border-left: 1px solid #a1a1a1;
    width: 33px;
    height: 33px;
    background-image:url(icons/x.png);
    background-position:center;
    background-repeat:no-repeat;    
}
.jui-hoverable:hover,.jui-hoverable-hovered
{   background-color: #f1f1f1;}

textarea:focus, input:focus{
    outline: none;
}

HTML

<div class="jui-textbox">
    <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">                                                
           Default
    </div>
    <input type="text" style="width: 300px;">
    <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
</div>

  • Что происходит со стилем? 31.07.2013

Ответы:


1

Попробуй это:

CSS:

 ::-ms-clear {
      display: none;
  }
.jui-textbox {
    width: 300px;
    border: 1px solid #DADADA;
    position: relative;
    padding:0 !important;
    white-space: nowrap;
    background: #fff;
    overflow: hidden;
    height: 33px;
    line-height: 33px;
    display: inline-block;
    /**display:inline;*/
    margin: 10px 0;
}

.jui-textbox input {
    background-color: transparent;
    color: #313131;
    height: 33px !important;
    line-height:33px\9;
    width: 300px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    padding: 0;
    margin: 0 5px !important;
    border: none;
    float:left;
}

.jui-textbox-placeholder {
    position: absolute;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;  
    color: #A1A1A1;
    height: 33px;
    line-height: 33px;
    padding: 0;
    margin: 0;
    left: 5px;
    overflow: hidden;
    cursor: text;
}


.jui-textbox-hover {
    border: 1px solid #CACACA;
}
.jui-textbox-active {
    border: 1px solid #a1a1a1;
}

.jui-textbox-clear.show{
    display:inline-block !important;
    *display:inline !important; 
}
.jui-textbox-clear {
    display:none;
    cursor: pointer;
    background: #fff;
    border-left: 1px solid #a1a1a1;
    width: 33px;
    height: 33px;
    background-image:url(icons/x.png);
    background-position:center;
    background-repeat:no-repeat;
    position: absolute;
    right: 0;   
}
.jui-hoverable:hover,.jui-hoverable-hovered
{   background-color: #f1f1f1;}

textarea:focus, input:focus{
    outline: none;
}

HTML:

<div class="jui-textbox">
        <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
                Default
        </div>
        <input type="text" style="width: 300px;">
        <div class="jui-textbox-clear jui-hoverable jui-icons-x"></div>
    </div>
    <br/>
<div class="jui-textbox">
        <div class="jui-textbox-placeholder" unselectable="on" style="font-size: 14px;">
                 Focused
        </div>
        <input type="text"  style="width: 266px;">
        <div class="jui-textbox-clear jui-hoverable jui-icons-x show"></div>
</div>

Протестировано в IE7 (Vista).

Демонстрация: http://jsfiddle.net/PENFT/

Другое решение, но оно не очень чистое:

  • Удаление width из .jui-textbox.

  • Добавление float:left; к ".jui-textbox" и замена <br/> на <br style="clear:both" />.

Примечание. <br style="clear:both" /> это очень грязно.

30.07.2013
  • Ах, это, кажется, сужает круг вопросов, поэтому установка встроенного контейнера вызывает проблему в ie7. Есть ли способ добиться этого без явной установки ширины .jui-textbox? Я бы предпочел полагаться на ввод для этого. Если нет, это может быть решением на данный момент! 31.07.2013
  • Вы можете добавить float:left; в .jui-textbox и заставить элемент самостоятельно очищать свои дочерние элементы. 31.07.2013
  • Принимая во внимание эти 2 решения, я не согласен с вашим первым предложением и просто устанавливаю ширину контейнера в моем коде виджета, видя, как я все равно его там создаю. Спасибо за помощь! 31.07.2013

  • 2

    В этом случае JavaScript — это простой хак, потому что в IE7 :focus не работает. Взгляните на проект ie7-js.

    IE7.js — это библиотека JavaScript, позволяющая Microsoft Internet Explorer вести себя как браузер, соответствующий стандартам. Он исправляет многие проблемы с HTML и CSS и обеспечивает правильную работу прозрачного PNG в IE5 и IE6.

    Обновите MSIE5.5-7, чтобы обеспечить совместимость с MSIE8.

    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->
    

    Вы также можете обратиться к этот вопрос SO. IE7 не поддерживает этот псевдокласс.

    30.07.2013
  • Боюсь, проблема не в фокусировке. Я просто привел статический пример состояний виджета. Проблема в том, как этот html отображается в ie7 с моим текущим CSS. Тем не менее, я проверю этот проект, выглядит интересно! 31.07.2013
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..