В стиле div = «переполнение: авто» не работает должным образом в IE 10

0

У меня есть таблица с одной строкой и 2 тс.

В каждом td я использую div и устанавливаю переполнение в auto. Мой код отлично работает в chrome, firefox и IE 8,9,10, но не работает должным образом в IE 11.

В правильном случае появляется полоса прокрутки, и я могу прокручивать вниз, но в IE 11 нет полосы прокрутки.

Это часть кода, в котором лежит проблема.

Вот ссылка на код, который я написал. jsfiddle.net/XrH7f/

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN">
<META http-equiv="Content-Type" content="text/html; charset=windows-874">

<html>
<head><style>
table
{
    border-top-color: #d3dfe2;
    border-right-color: #d3dfe2;
    border-bottom-color: #d3dfe2;
    border-left-color: #d3dfe2;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-image-source: none;
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}
table td
{
    border-top-color: #d3dfe2;
    border-right-color: #d3dfe2;
    border-bottom-color: #d3dfe2;
    border-left-color: #d3dfe2;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-image-source: none;
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
}
td
{
    color: #003366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

</style></head>
<body text="#000000" topmargin="0" leftmargin="1" bgcolor="#ffffff"><form name="form1" action="page2.jsp" method="POST">

<table width="100%" align="center" bordercolor="#d3dfe2" border="1" cellspacing="0" cellpadding="1">

 <tbody>
  <tr bgcolor="#ecfefe">


   <td width="17%" height="100" align="right" valign="middle">

    <div style="width: 100%; height: 100%; overflow: auto;">

                                 Select Make:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ALL: <input name="allMake" onclick="selectallMe();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="ALL" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />


                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="BBDC           " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MBCL           " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="LIQUIDITY      " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdefghijkl         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="TPH            " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="CGCSL          " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MB             " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 Abcdef         <input name="Make" onclick="selectAllMake();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="CG             " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
>

   </td>


   <td width="17%" height="100" align="right" valign="middle">

    <!-- Here we will place the check Boxes of "Select Make" and "Select Condition"  -->

    <div style="width: 100%; height: 100%; overflow: auto;">

                                Select Condition:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ALL: <input name="allCondition" onclick="selectAllCn();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="ALL" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 1<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DEMO" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 2<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="NEW " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 3<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="SOLD" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 4<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="SR  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 5<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="WH  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 6<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="VQC " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 7<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="PHWH" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 8<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="PHSR" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 9<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DST " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 10<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DIS " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 11<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DB  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 12<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="DST2" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 13<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="FLET" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

                                 14<input name="Condition" onclick="selectAllCondition();" onchange="changeVisiblityVehicle()" type="checkbox" checked="" value="MS  " />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />

    </div>

   </td>

  </tr>

 </tbody>
</table>

</form></body></html>
  • 0
    Это прекрасно работает со мной (IE 10)!
  • 1
    Помимо этого, вы можете исключить целый набор свойств, используя сокращенное свойство: border: 1px solid #d3dfe2 .
Показать ещё 4 комментария
Теги:
internet-explorer-11

1 ответ

2

Ааа. Наконец получил ответ после некоторых НИОКР. Высота тега div, заданная в%, создает проблему. изменил высоту 1-го div от 100% до 100px и volla !!!!! Получил исправление. Спасибо за помощь, ребята!

Также установите атрибут vlign 1-го td вверху из середины.

  • 0
    Как хорошая привычка, не используйте встроенный CSS, или вы столкнетесь с такой проблемой, которая не может быть решена путем изменения CSS

Ещё вопросы

Сообщество Overcoder
Наверх
Меню