Question

这是我的页面。我需要在这里插入完整的代码。

<!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上） Firefox Snapshot

我发现以下问题，如果还有其他问题，请告诉我。

IE8和Chrome正在显示一些额外的高度（显示第二种形式的一小部分）
IE6未显示CSS中指定的宽度。
在IE6中，最初制表符div正在触及表格div。但是鼠标悬停它会增加一些额外的间距。

如何解决。

Answer 1

我不确定第1点和第1点是什么意思2，但3我修好了。我可能已修复1＆amp; 2（不确定）。

让我知道这对你有用。

http://jsfiddle.net/3uMyA/3/

表格在chrome和IE6中没有正确显示

1 个答案: