表格无法在chrome和IE6中正确显示

如何解决表格无法在chrome和IE6中正确显示

| 这是我的页面。我需要在此处插入整个代码。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<Meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Untitled Document</title>
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
    $(document).ready(function(){
        $(\'#tabs ul li:first a\').addClass(\"active\");
        $(\'#forms\').find(\'form\').hide().fadeIn(1500);
        $(\"#tabs ul li\").click(function() {
            $(\"#tabs ul li\").removeClass(\"active\");
            $(this).addClass(\"active\");
            $(\"#forms form\").hide();
            var activeTab = $(this).find(\"a\").attr(\"href\");
            $(activeTab).fadeIn();
            return false; 
        });
    });
</script>
<style type=\"text/css\">
* { margin:0; padding:0; }
body { background:#27476B; }
.clear { clear:both; }
#wrapper { width:510px; height:331px; overflow:hidden; padding:10px; }
#tabs ul { padding-left:15px; list-style:none; }
#tabs ul li { display:block; float:left; text-align:center; }
#tabs ul li a { padding:3px 20px 2px 20px; color:#fff; text-decoration:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; }
#tabs ul li a:hover { background:#AEBAC1; } 
#tabs ul li a.active,#tabs ul li.active a:hover { background:#AEBAC1; color:#333; }
#forms form { background:#AEBAC1; border:2px solid #333; padding-left:5px; }
.twocol { display:block; float:left; width:250px; margin-bottom:10px; }
.twocol label { margin-top:.33em; display:block; width:240px;}
.twocol select,.twocol input[type=\"text\"] { background:#456A87; color:#fff; display:block; width:240px; font-size:16px; }
.twocol span { padding:0 8px 0 5px; }
.search { width:500px; text-align:center; margin-bottom:5px; }
</style>
</head>

<body>
    <div id=\"wrapper\">
        <div id=\"tabs\">
            <ul>
                <li><a href=\"#properties\">Properties</a></li>
                <li><a href=\"#developments\">Developments</a></li>
                <li><a href=\"#agents\">Agents</a></li>
            </ul>
        </div>
        <div class=\"clear\"></div>
        <div id=\"forms\">
        <!--
                Search Form for Properties
        -->
          <form id=\"properties\" name=\"properties\" method=\"post\" action=\"\">
          <div class=\"twocol\">
              <label for=\"city\">City:</label>
              <select name=\"city\" size=\"1\">
                <option>-</option><option>asdfadf</option><option>-</option>
              </select>

              <label for=\"bedrooms\">bedroom:</label>
              <select name=\"bedrooms\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"minprice\">Minimum Price:</label>
              <select name=\"minprice\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"minarea\">Minimum Area:</label>
              <select name=\"minarea\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"propertytype\">Property Type:</label>
              <select name=\"propertytype\" size=\"1\">
                <option>-</option>
              </select>

          </div>
          <div class=\"twocol\">
              <label for=\"location\">Location:</label>
              <select name=\"location\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"addedwithin\">Added Within:</label>
              <select name=\"addedwithin\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"maxprice\">Maximum Price:</label>
              <select name=\"maxprice\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"maxarea\">Maximum Area:</label>
              <select name=\"maxarea\" size=\"1\">
                <option>-</option>
              </select>

              <label for=\"searchfor\">Search For:</label>
              <input name=\"searchfor\" type=\"radio\" value=\"sale\" /><span>Sale</span>
              <input name=\"searchfor\" type=\"radio\" value=\"purchase\" /><span>Purchase</span>
              <input name=\"searchfor\" type=\"radio\" value=\"rental\" /><span>Rental</span>
          </div>
          <hr class=\"clear\" /><br />
          <div class=\"search\">
            <input type=\"submit\" value=\"Search\" />
          </div>
          </form>
        <!--
                Search Form for Developments
        -->
        <form id=\"developments\" name=\"developments\" method=\"post\" action=\"\">
            <div class=\"twocol\">
                <label for=\"city\">City:</label>
                <select name=\"city\" size=\"1\">
                    <option>-</option><option>asdfadf</option><option>-</option>
                </select>
            </div>
            <div class=\"twocol\">
                <label for=\"developmentname\">Development name:</label>
                <input type=\"text\" name=\"developementname\" />
            </div>
            <hr class=\"clear\" /><br />
            <div class=\"search\">
                <input type=\"submit\" value=\"Search\" />
            </div>
        </form>
        </div>
    </div>
</body>
</html>

这是完美的视图（在Firefox上）我发现了以下问题，如果还有其他问题，请告诉我。 IE8和Chrome浏览器显示出一些额外的高度（显示第二个表单的一小部分） IE6未显示CSS中指定的宽度。在IE6中，最初的div标签与div表单接触。但是在鼠标上方添加了一些额外的间距。怎么解决。

解决方法

我不确定第1点和第2点是什么意思，但我已经确定了3点。我可能有固定的1和2（不确定）。让我知道这对您如何工作。 http://jsfiddle.net/3uMyA/3/