2

Здравствуйте уважаемое сообщество. Нужна помощь.

На форме присутствует два multiselect. Первый select заполнен данными из базы данных. Второй select при инициализации пустой. В последующем пользователь может выбрать определенные значения из первого select и по нажатию кнопки (на кнопке весит обработчик JQuery) перенести их во второй select (служит в виде фильтра для построения отчетов).

Проблемы: - Плывет верстка в браузерах IE (на текущий момент используются версии от 8 до 11) - при установке режима совместимости либо плывет верстка, либо тормозит JavaScript

Вопросы - Какие есть простые решения в поддержкой IE (ActiveX не предлагать - отказываемся от них) - Как сверстать хотя бы под IE 8 - Натолкните что можно почитать, посмотреть.

Спасибо.

Вот коды: Страница

<html>
<head>
    <title>Филтр</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/stl.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="lib/html5shiv/html5shiv.min.js"></script>
      <script src="lib/html5shiv/respond.min.js"></script>
    <![endif]-->

</head> 
<body>
    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th class="col-lg-5"><p class="text-center">Доступные</p></th>
                    <th class="col-lg-2"></th>
                    <th class="col-lg-5"><p class="text-center">Выбранные</p></th>
                </tr>
            </thead>
            <tbody class="tbody">
                <tr class="tbody-tr">
                    <td class="tbody-tr-td">
                        <div class="sel">
                            <select multiple class="form-control" id="oSource" name="oSource">
                                <option value=1>00001</option>
                                <option value=2>00002</option>
                                <option value=3>00003</option>
                                <option value=4>00004</option>
                                <option value=388>00005</option>
                                <option value=323>04600</option>
                                <option value=5>04730</option>
                                <option value=501>04733</option>
                                <option value=499>04736</option>
                                <option value=632>10000</option>
                                <option value=653>100000</option>
                                <option value=7>10001</option>
                                <option value=8>10002</option>
                                <option value=9>10003</option>
                                <option value=10>10004</option>
                                <option value=11>10005</option>
                                <option value=12>10007</option>
                                <option value=13>10008</option>       
                                <option value=369>00000</option>
                                <option value=1>00001</option>
                                <option value=2>00002</option>
                                <option value=3>00003</option>
                                <option value=4>00004</option>
                                <option value=388>00005</option>
                                <option value=323>04600</option>
                                <option value=5>04730</option>
                                <option value=501>04733</option>
                                <option value=499>04736</option>
                                <option value=632>10000</option>
                                <option value=653>100000</option>
                                <option value=7>10001</option>
                                <option value=8>10002</option>
                                <option value=9>10003</option>
                                <option value=10>10004</option>
                                <option value=11>10005</option>
                                <option value=12>10007</option>
                                <option value=13>10008</option> 
                                <option value=369>00000</option>
                                <option value=1>00001</option>
                                <option value=2>00002</option>
                            </select>
                        </div>
                    </td>
                    <td>
                        <div id=controls>
                            <div>
                                <input id=swapLeft type=button value=">">
                                <br>
                                <input id=swapRight type=button value="<">
                            </div>
                            <br>
                            <br>
                            <div>
                                <input id=swapLeftAll type=button value=">>">
                                <br>
                                <input id=swapRightAll type=button value="<<">
                            </div>
                            <button id=ascending>
                                Ascending
                            </button>
                            <button id=descending>Descending</button>
                            <input id=AAlert type=button value=AAler>
                        </div>
                    </td>
                    <td class="tbody-tr-td">
                        <div class="sel">
                            <select multiple class="form-control" id="oTarget" name="oTarget"></select>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="lib/jquery/jquery-1.11.2.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/arm/filter_objects/script.js"></script>

</body>

Файл script.js

    $(document).ready(function() {

    $('#ascending').click(function() {
    //SORTER.sort('.sortable');

    var mylist = $('#oSource');
    var listitems = mylist.children('option').get();
        listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
        $.each(listitems, function(idx, itm) { mylist.append(itm); });
  });


   $('#descending').click(function() {
     SORTER.sorter('#oSource');
   });



  $('#swapLeft').click(function() {
    SWAPLIST.swap('#oSource', '#oTarget');
    var tekelement = $("#oSource option:selected").val();
    tekelement = tekelement + 1;    
    SORTER.sorter('#oSource');
    SORTER.sorter('#oTarget');
    $("#oSource :nth-child(2)").attr("selected", "selected");
    $("#oTarget :nth-child(1)").attr("selected", "selected");
  });
  $('#swapRight').click(function() {
    SWAPLIST.swap('#oTarget', '#oSource');
    SORTER.sorter('#oSource');
    SORTER.sorter('#oTarget');
  });
  $('#swapLeftAll').click(function() {
    SWAPLIST.swapAll('#oSource', '#oTarget');
    SORTER.sorter('#oSource');
    SORTER.sorter('#oTarget');
  });
  $('#swapRightAll').click(function() {
    SWAPLIST.swapAll('#oTarget', '#oSource');
    SORTER.sorter('#oSource');
    SORTER.sorter('#oTarget');
  });

  $('.invert').click(function(e) {
    SWAPLIST.invert($(this).parent().find('select'));
    e.preventDefault();
  });
  $('#search').keyup(function() {
    SWAPLIST.search("#oTarget, #oSource", $(this).val());
  });
});

var SWAPLIST = {};
SWAPLIST.swap = function(from, to) {
  $(from)
    .find(':selected')
    .appendTo(to);
}
SWAPLIST.swapAll = function(from,to) {
  $(from)
    .children()
    .appendTo(to);
}
SWAPLIST.invert = function(list) {
  $(list)
    .children()
    .prop('selected', function(i, selected) {
      return !selected;
    });
}
SWAPLIST.search = function(list, search) {
  $(list)
    .children()
    .prop('selected', false)
    .filter(function() {
      if (!search) {
        return false;
      }
      return $(this)
        .text()
        .toLowerCase()
        .indexOf(search.toLowerCase()) > - 1
    })
    .prop('selected', true);
}




var SORTER = {};
SORTER.sorter = function(name_list) {
  var mylist = $(name_list)
  var listitems = mylist.children('option').get();
        listitems.sort(function(a, b) {
        var compA = $(a).text().toUpperCase();
        var compB = $(b).text().toUpperCase();
        return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    })
        $.each(listitems, function(idx, itm) { mylist.append(itm); });
}

Песочница для примера: https://jsfiddle.net/Toshax/4dmxszu4/

Обновление

Я бы с радостью забыл бы. Но на заводе порядка 4000 компьютеров. По корпоративному стандарту администраторов браузеры разрешены IE (ибо со слов админов они корректно поддерживают AD авторизацию), а версий этих браузеров начиная от 5 и заканчивая 11

По поводу режима совместимости. Вероятно грамотно не смогу объяснить, наверное лучше показать. Есть подозрение что-то где-то жёстко задан этот режим EI5. В 11 IE

введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения

D IE8 отображается также как на 1 скрине. ПарамертыЖ Режим обозревателя IE8, Режим документов совместимый.

7
  • возможно еще стоит уточнить что значит "при установке режима совместимости", то есть в каком браузере на самом деле смотрим. Браузер IE-x и браузер IE-y в режиме совместимости с IE-x - разные браузеры. То есть Вы смотрите прямо в IE8, в IE8 в режиме соместимости скажем с 7, в IE11 в совместимости с 8 или вообще в каком-нибудь иетестере? 24 июн 2015 в 13:12
  • @Regent Было бы неплохо... А нет ли где-нибудь статьи забудьте о требованиях клиента и делайте, что сами хотите?
    – Aleks G
    26 июн 2015 в 20:34
  • @Regent. На моем примере в компании закрытая сетка на несколько тысяч компов пару сайтов на sharepoint и дефолный IE. И кстати sharepoint намного лучше работает в IE ибо связка IE и продукции мелкософта лучше чем у хромиумов к примеру. Так что и разаботка под IE всееще имеет смысл
    – Павел
    27 июн 2015 в 7:05
  • @Павел ох уж эти компании...
    – Regent
    27 июн 2015 в 17:39
  • Можно минимальный достаточный пример в виде zip-архива (со всеми библиотеками и стилями)?
    – Qwertiy
    27 июн 2015 в 20:54

1 ответ 1

2
+100

Позвольте выделю основное:

Проблемы: Плывет верстка в браузерах IE
Вопросы: Какие есть простые решения в поддержкой IE, Как сверстать под IE, Натолкните что можно почитать/посмотреть

Два решения Вы уже нашли и используете: HTML5Shiv.js и Respond.js

Дело осталось за малым:
excanvas.js - если нужен canvas. IE ниже 9 версии не поддерживает canvas.
css3pie - (Progressive Internet Explorer) это дополнительный движок (модернизация) для IE. Он позволяет IE понять некоторые возможности CSS3, а именно:
1. border-radius
2. box-shadow
3. border-image
4. множественные фоновые изображения
5. линейные градиенты в качестве фона

Так же стоит помнить, что IE понимает PADDING не так, как остальные.

Некоторые, точно не помню уже какие, IE включает значение padding в указанное значение width. (Если width: 150px; padding: 10px; то ширина блока равняется 150 пикселям, а ширина полезной области - 130 пикселям.)

Opera, FireFox, Safari все значение width отводят для полезной площади, а padding прибавляет дополнительно. (Если width: 150px; padding: 10px; то ширина блока равняется 170 пикселям, а ширина полезной области - 150 пикселям.)

IE отобразит этот код не так, как остальные браузеры:

<div>
<span class=tc style="width: 150px; padding: 50px;"><div> бла-бла-бла </div></span>
<span class=tc style="width: 150px; padding: 50px;"><div> ля-дя<br>ля-ля<br>ля-ля </div></span>
</div>

А этот код все отобразят одинаково:

<div>
<span class=tc style="width: 250px;"><div style="padding: 50px;"> бла-бла-бла </div></span>
<span class=tc style="width: 250px;"><div style="padding: 50px;"> ля-дя<br>ля-ля<br>ля-ля </div></span>
</div>

Если нужен дополнительный отступ, его нужно указывать во внутреннем блоке.

Используя все эти примочки, все равно приходится проходить по сайту каждым из IE.
И делать что то вроде:

<!--[if IE 9]>
<link type="text/css" href="ie9.css" rel="stylesheet">
<![endif]-->

<!--[if IE 8]>
<link type="text/css" href="ie8.css" rel="stylesheet">
<![endif]-->

<!--[if IE 7]>
<link type="text/css" href="ie7.css" rel="stylesheet">
<![endif]--> 

Полезно почитать:
Вредная верстка
CSS хаки
Самая полная шпаргалка для IE6
Особенности CSS в IE7

UPD1:
Режими совместимости, как и IE тестер, не до конца предугадывают поведение, как поведет себя настоящий браузер.

На бога надейся, а сам не плошай! (с)

Для этих целей держу под рукой XP с IE7, отдельно XP с IE8, хотя у тех у кого XP можно через скрипт попросить обновиться до 8-й версии.
То же самое с 9-й и 10-й версией, как минимум в 7-ке, с Vista не обращались, сказать не могу.
Для 11-й версии - виртуалка с Windows 8/8.1
Все это личные наблюдения, у кого то может и по другому...

3
  • 1
    "IE включает значение padding в указанное значение width." - box-sizing: border-box и радуемся. Не надо всякие div'ы городить.
    – Qwertiy
    29 июн 2015 в 9:43
  • На сколько знаю IE8+
    – borodatych
    29 июн 2015 в 12:37
  • Спасибо за информацию. Пока решили что минимально будем работать с IE8. Прикрутил Bootstrap и немного оптимизировал JS. За ссылки отдельное спасибо.
    – Anton
    22 июл 2015 в 6:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.