【发布时间】：2012-03-22 00:05:25
【问题描述】：
所以我是一名网络开发人员，曾经有一个善良的图形设计人员帮助我解决这种浏览器兼容性问题，但可惜他已经转向更绿色的牧场。下面的 html 在 chrome 上看起来很好而且很漂亮，但是我用来对齐表单的表格在 ie 和 firefox 的底部工作。我不应该使用桌子吗？ div 标签中的浮动是否把一切都搞砸了？任何改进我的 html 和 css 的提示或建议将不胜感激。
此外，文本区域的文本有时在框中的位置方面会有些混乱。
谢谢大家。
<div style="border-style:solid; border-color:#336699; padding: 5px; margin-left:auto; margin-right:auto; width:600px; height:300px;" id="demoContainer">
<div style="" id="demo">
<div style="" id="demoHeader">
<img src="someimage" />
<span style="font-size:32px;">Demo</span>
</div>
<div style="" id="demoBody">
<form method="get">
<div style="float:left; padding:5px;" id="demoBodyText">
<textarea style="resize:none;" rows="10" cols="30">
Enter demo text here...
</textarea>
</div>
<div style="float:right; padding:5px;" id="demoBodyOptions">
<table style="float:right;">
<tr>
<th>
Option 1:
</th>
<td>
<select style="">
<option>asdf</option>
</select>
</td>
</tr>
<tr>
<th>
Option 2:
</th>
<td>
<select style="align:left;">
<option value="320">Fastest</option>
<option value="260">Faster</option>
<option value="200">Fast</option>
<option value="170" selected="selected">Default</option>
<option value="130">Slow</option>
<option value="110">Slower</option>
<option value="80">Slowest</option>
</select>
</td>
</tr>
<tr>
<th>
Option 3:
</th>
<td>
<select>
<option value="4.2">Highest</option>
<option value="3">Higher</option>
<option value="2">High</option>
<option value="1" selected>Default</option>
<option value="0.8">Low</option>
<option value="0.6">Lower</option>
<option value="0.4">Lowest</option>
</select style="align:left;">
</td>
</tr>
<tr>
<th>
Option 4
</th>
<td>
<select>
<option value="none">None</option>
</select style="align:left;" >
</td>
</tr>
<tr>
<td>
<input type="submit" />
</td>
</tr>
</table>
</div>
</form>
</div>
<div style="clear:both;" id="demoFooter">
Footer
</div>
</div>
</div>
编辑：在我的 Firefox 版本 10 中添加了图像。
【问题讨论】：
-
你测试的是哪个 IE 版本？至于
textarea文本，textarea按字面意思解释空格，所以你应该改用这个：<textarea style="resize:none;" rows="10" cols="30">Enter demo text here...</textarea> -
实际上是 IE 9。 div 中的表格只是导致表格漂浮到无处。另外，如果您不介意回答我现在正在做的事情，请尝试让标题中的演示文本与图像对齐。我想念我的网页设计师伙伴 :'(
-
我不明白问题是什么。
-
嗯，我似乎看不出 IE8 和 FF/chrome 之间的区别，但我可能是盲人..jsfiddle.net/E7gms 这在 IE 中看起来仍然很奇怪吗？
-
有一些细微的差别，但我们缺少主要的 CSS 文件，我认为它包含更多的布局信息。你能发布一个带有源代码和相关 CSS 类的 jsfiddle 吗？
标签： html css internet-explorer firefox google-chrome