html - Div 中的表格 Firefox 与 Chrome

Question

所以我是一名 Web 开发人员，曾经有一位善良的图形设计人员帮助我解决这种浏览器兼容性问题，但遗憾的是，他已经转向了更好的牧场。下面的 html 在 chrome 上看起来不错，但我用来对齐我的表格的表格在 ie 和 firefox 的底部工作。我不应该使用表格吗？ div 标签中的 float 是否搞砸了一切？非常感谢任何改进我的 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 中添加图像以显示它的显示方式。

Answer 1

如果你有一个 float:right after float:left 这看起来很正常。

尝试调换两者的顺序，或者也给第二个 float:left

或者填充是问题所在？
http://jsfiddle.net/HerrSerker/55cXT/
float div #demoBodyText 和 #demoBodyOptions 的宽度是多少？