我们开始为我们的应用程序支持 IE11。考虑到这一点,我们的应用程序应该在IE11和IE8中都能正常工作。特别是动态行显示有问题。附上下面的 HTML 代码。如果您注意到自定义行的宽度无法正确响应。欢迎任何建议。
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en">
<style>
#customwidth{
background-color: #ffffe1;
width: 62%;
}
</style>
<body>
<table width="746px" cellspacing="0" id="productTable">
<tr id="productid">
<td width="165px" <label for="Product">Product</label></td>
<td width="200px">
<select id="prodSel" onchange='changeit()'>
<option value="one" >Select Product</option>
<option value="two">Product 1</option>
<option value="three">Product 2 </option>
</select>
</td>
</tr>
<tr>
<td width="165px">Term</td>
<td width="200px"><select>
<option >5 years</option>
<option >10 years</option>
<option >15 years</option></td>
</tr>
<tr id="amountid" style="display: none">
<td id="customwidth">Amount</td>
<td width="200px"><input type="text"></td>
<td >
</tr>
<script>
document.getElementById("prodSel").change = function() {changeit()};
function changeit(){
var x= document.getElementById('prodSel').value;
if (x == 'three')
{
document.getElementById('amountid').style.display = 'block';
}
}
</script>
</body>
</html>
由于您显示的是表行元素,因此您需要将 display
属性设置为 table-row
,而不是block
:
document.getElementById('amountid').style.display = 'table-row';
还要验证你的HTML,你有很多问题,如未闭合的标签,无效的属性(width="746px")等。它可能导致渲染中断,尤其是在 IE 中。