Question

在论坛上找不到任何好的答案。我在td情况下有一张桌子，我无法以某种方式避免。 IE忽略表格的“高度：100％”样式并采用最小可能的高度。而ff扩展表高度以适合td

在IE 8或更高版本中运行此小提琴。我希望红线能够扩展文本的整个高度。 http://jsfiddle.net/VKG3f/

<html lang="en-US" dir="ltr">
<head><style>
.line
{
    width: 5px;
    height: 100%;
    display: table-cell;
    min-height: 10px;
    max-width: 5px;
    background-repeat: repeat;
    background-color: red;
}
.text
{
    text-align: left;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    max-width: 100px;
}
body
{
    margin-top: 8px;
}

</style></head>
<body ><div id="d1">
<table border="0" cellspacing="0" cellpadding="0" summary=""><tbody>
<tr>
 <td style="height: 100%">
  <table border="0" cellspacing="0" cellpadding="0" summary="" style="height: 100%;  overflow:scroll;">
   <tbody>
    <tr>
     <td class="line">
      <div class="line">
       <span class=""></span>
      </div>
     </td>
    </tr>
   </tbody>
  </table>
 </td>
 <td>
  <div class="text">
   <a title="Current Step: This is a very long text which might even go to six lines and is done to check wrapping" 
   href="#">This is a very long text which might even go to six lines and is done to check wrapping</a>
  </div>
 </td>
</tr>

</tbody></table></div></div></div></form></div></body></html>

Answer 1

您需要height:100%给body,html和父div

body, html
{
    margin-top: 8px; height:100%
}
table, #d1{
    height:100%
}

<强> DEMO

IE表高度不能拉伸到最大值

1 个答案: