IE11 中的动态行显示



我们开始为我们的应用程序支持 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 中。

最新更新