2013-10-21 95 views
0

我有一個單行和兩個tds表。在IE 10中,div style =「overflow:auto」無法正常工作

在每個td中,我使用一個div並將溢出設置爲auto。我的代碼工作正常鉻,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'。 – steveax

+0

@steveax thx的提示。我已經在使用您所說的相同格式。我從視圖源複製了代碼,並在這些分區中細分了屬性。 Thx的建議雖然。 –

回答

1

唉唉。最後在R & D.之後得到了答案。當在%中指定div標籤的高度時,會產生問題。將第一個div的高度從100%改爲100px和volla !!!!!得到了修復。謝謝你們的幫助。

還設置第一個TD的vlign屬性從中間到頂部。

+0

作爲一個好習慣,不要使用內聯的CSS或你會遇到這樣的問題,不能通過改變CSS來解決 – KTU