这是我的页面。我需要在此处插入整个代码。
<!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>
这是完美的 View (在 Firefox 上)
我发现了以下问题，如果还有其他问题请告诉我。
- IE8 和 Chrome 显示了一些额外的高度(显示了第二形式的一小部分)
- IE6 不显示 CSS 中指定的宽度。
- 在 IE6 中，最初选项卡 div 与表单 div 接触。但是在鼠标悬停时会增加一些额外的间距。
如何解决。
最佳答案
关于css - 表单在 chrome 和 IE6 中显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5648705/