Question

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

Answer 1

由于您要显示表格行元素，因此您需要将display属性设置为table-row，而不是block：

document.getElementById('amountid').style.display = 'table-row';

同样验证您的HTML，您有许多问题，如未关闭的标签，无效的属性（width =“746px”）等。它可能导致渲染损坏，尤其是在IE中。

ie11中的动态行显示

1 个答案: