中间div应该保持剩余宽度。 在Firefox中有效，但在IE中无效。 为什么？
[英]Middle div should get remaining width. Works in Firefox but not IE. Why?
问题描述
I have a div containing 3 divs. 
我有一个包含3个div的div。 The div to the left and right each have their width set to 200px and the middle div should get all the remaining width. 左侧和右侧的div的宽度均设置为200px，中间的div应该获得所有剩余的宽度。 This works fine in Firefox but not in IE8 and IE9. 在Firefox中可以正常工作，但在IE8和IE9中则不能。
Can someone please tell me why this doesn't work in IE? 有人可以告诉我为什么这在IE中不起作用吗？
<html>
<body>
<div id="outercontainer" style="width:100%;overflow:hidden;">
<div class"fixedtablediv" style="width:200px;float:right;">
<table id="signtable" class="patable">
<thead>
<tr style="height: 101px;" class="headstyle" id="signtableheadtr">
<td style="text-align: left;"><b>Summa</b></td>
<td style="text-align: left;"><b>Godk. <input name="trigger" tabindex="-1" value="appr" onclick="checkAll(0, this, this.value)" type="checkbox"></b></td>
<td style="text-align: left;"><b>Spärr <input name="trigger1" tabindex="-1" value="block" onclick="checkAll(0, this, this.value)" type="checkbox"></b></td>
</tr>
</thead>
<tbody>
<tr class="rowlight">
<td style="text-align: right;">40.00</td>
<td style="text-align: left;"><input name="appr" value="0" type="checkbox"></td>
<td style="text-align: left;"><input name="block" value="0" type="checkbox"></td>
</tr>
<tr class="rowdark">
<td style="text-align: right;">32.00</td>
<td style="text-align: left;"><input name="appr" value="1" type="checkbox"></td>
<td style="text-align: left;"><input name="block" value="1" type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
<div class"fixedtablediv" style="width:200px;float:left;">
<table id="nametable">
<thead id="nametablehead" style="vertical-align:bottom;">
<tr class="headstyle" id='nametableheadtr'>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_10"><b>Firstname</b></a></td>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_11"><b>Lastname</b></a></td>
<td style="text-align: left;"><a class="" href="/hrm/web?palette=0&value=&funcid=F_PAC_12"><b>Id</b></a></td>
</tr>
</thead>
<tbody>
<tr class="rowlight" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';">
<td style="text-align: left;">Gunnar</td><td style="text-align: left;">Svensson</td>
<td style="text-align: left;">123</td>
</tr>
<tr class="rowdark" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';">
<td style="text-align: left;">Sven</td>
<td style="text-align: left;">Svensson</td>
<td style="text-align: left;">789</td>
</tr>
</tbody>
</table>
</div>
<div id="scrolldiv" style="overflow:auto;margin-left:200px;margin-right:200px;">
<table id="projecttable">
<thead id="projtablehead">
<tr class="headstyle">
<td colspan="47" style="text-align: left;"><b>Projects</b></td>
</tr>
<tr class="headstyle">
<td style="text-align: left;"><b>M123-ABC DBF Proc</b></td>
<td style="text-align: left;"><b>Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R9/Offertarbete Max</b></td>
<td style="text-align: left;"><b>R9/Offertarbete flights</b></td>
<td style="text-align: left;"><b>R1/ABC12 Planning & Project control</b></td>
<td style="text-align: left;"><b>RU123/ABC12 Contract Admi</b></td>
<td style="text-align: left;"><b>RU13/ABC12 Product Assurance</b></td>
<td style="text-align: left;"><b>RU121/ABC12 LS Planning</b></td>
<td style="text-align: left;"><b>RU12242/ABC12 LS execution</b></td>
<td style="text-align: left;"><b>RU11/ABC12 LS Plan and Final REP.</b></td>
<td style="text-align: left;"><b>RU52/ABC12 LS Pre and post campaign</b></td>
<td style="text-align: left;"><b>RU61/ABC12 LS Campaign Mngmt</b></td>
<td style="text-align: left;"><b>RU62/ABC12 LS Campaign execution</b></td>
<td style="text-align: left;"><b>RU29/ABC12 P/L System engineering</b></td>
<td style="text-align: left;"><b>R1/Planning&Project control</b></td>
<td style="text-align: left;"><b>R1/Contract Admi</b></td>
<td style="text-align: left;"><b>R1/Prod Assurance</b></td>
<td style="text-align: left;"><b>R1/System engineering</b></td>
<td style="text-align: left;"><b>R1/B3 mgmt</b></td>
<td style="text-align: left;"><b>R1/B3 Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R1/B3 Sys Eng</b></td>
<td style="text-align: left;"><b>R1/IMP Mgmt</b></td>
<td style="text-align: left;"><b>R1/IMP Meetings and Reviews</b></td>
<td style="text-align: left;"><b>R1/IMPACHT Sys Eng</b></td>
<td style="text-align: left;"><b>R1/CD mgmt</b></td>
<td style="text-align: left;"><b>R1/CD Sys Eng</b></td>
<td style="text-align: left;"><b>RA8/Management & PA</b></td>
<td style="text-align: left;"><b>RA8/C Re-entry cone</b></td>
<td style="text-align: left;"><b>RA9/Management and PA</b></td>
<td style="text-align: left;"><b>RA95/Ext Meetings and Design Review</b></td>
<td style="text-align: left;"><b>RA9/System Engineering</b></td>
<td style="text-align: left;"><b>RA9/New TMSystem dev. t.</b></td>
<td style="text-align: left;"><b>RA9/Guidance and control system</b></td>
<td style="text-align: left;"><b>RA95/ABC proc manuf. and design</b></td>
<td style="text-align: left;"><b>RA95/assembly and test</b></td>
<td style="text-align: left;"><b>RA9/ Proc manuf. and design</b></td>
<td style="text-align: left;"><b>RA9/assembly and test</b></td>
<td style="text-align: left;"><b>RA9/INA integration and test</b></td>
<td style="text-align: left;"><b>RA9/system integration and test</b></td>
<td style="text-align: left;"><b>RA9/Fin assembly</b></td>
<td style="text-align: left;"><b>RA9/motor</b></td>
<td style="text-align: left;"><b>RA9/transport</b></td>
<td style="text-align: left;"><b>RA9/review and end to end test</b></td>
<td style="text-align: left;"><b>RA9/Prep</b></td>
<td style="text-align: left;"><b>RA9/campaign</b></td>
<td style="text-align: left;"><b>RA9/Flight Work</b></td>
<td style="text-align: left;"><b>RA9/8 Study</b></td>
</tr>
</thead>
<tbody>
<tr class="rowlight" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';"> <td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-04 8.00 Projekttid 2013-03-05 4.00 Projekttid 2013-03-06 3.00 Projekttid ">15.00</span></td><td style="text-align: right;"><span title="2013-03-06 5.00 Projekttid ">5.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-07 8.00 Projekttid ">8.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td></tr>
<tr class="rowdark" onmouseover="this.style.background = '#EED';" onmouseout="this.style.background = '';"> <td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-04 8.00 Projekttid 2013-03-05 8.00 Projekttid ">16.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"><span title="2013-03-06 8.00 Projekttid ">8.00</span></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td><td style="text-align: right;"></td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
1 个解决方案
解决方案1
-1 已采纳 2013-03-22 17:47:21
Looks like you are in quirksmode . 看来您处于怪癖模式 。 You should include a DOCTYPE declaration ie 您应该包括一个DOCTYPE声明，即
<!DOCTYPE html>
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS DIV默认宽度在IE中看起来不错。 不是Firefox - CSS DIV Default width looks good in IE. Not Firefox
CSS没有在Firefox或IE中加载。 适用于Chrome - CSS not loading in Firefox or IE. Works in Chrome
在没有宽度的浮动div中浮动子项时Chrome和Firefox的不同渲染。 - Different rendering from Chrome and Firefox when having floated children in a floated div with no width.
为什么这个按钮在IE中工作但在Firefox中不起作用？ - Why this button works in IE but not in Firefox?
在Firefox中而不是IE上运行的Javascript，为什么？ - Javascript that works in Firefox and not IE…why?
设置“ location.hash”不适用于IE中的部分页面回发。 它在FireFox中工作 - Setting the “location.hash” cannot work with the partial page postback in IE. It works in FireFox
找不到ID为的元素：仅在IE上执行时才发出。 适用于Firefox - Unable to find element with id : Issue only when executing on IE. Works fine for Firefox
Div 100％的高度适用于Firefox，但不适用于IE - Div 100% height works on Firefox but not in IE
ajax类型：“ GET”适用于Firefox和chrome，但不适用于IE - ajax type:“GET” works for firefox and chrome but not for IE
IE的高度/宽度与Firefox不同 - IE has different height/width for div than Firefox
相关标签