1
首先，我剛剛開始學習html & css大約一個星期前不停地像一個瘋子一樣，我決定標記一個我幾年前創建的設計。我知道我的html和or css存在問題，但我只是開始嘗試使用最佳實踐。我也可以使用更多的速記。無論如何，我正在散漫。渲染瀏覽器之間的問題
我認爲的問題是，我一直在使用絕對定位。經過相當多的故障排除之後，我在同一頁面上找到了Firefox和Chrome。不過，我認爲我的佈局不是流動的，所以在Chrome中，當我使用cmd +進行縮放時，所有內容都完全沒有問題。在Firefox中沒有問題。然後IE本身就是另一個怪物。事物遍佈整個地方。真的很不安。
這一直使我瘋狂。當事情不按照你想要的方式工作時，這是一場艱苦的鬥爭，但我很喜歡學習網頁設計。如果任何人都可以提供幫助，將不勝感激。我下面貼我的代碼...
HTML：
<body>
<div id="main">
<div class="container">
<div id="header">
<div id="searchBar">
<form action=""> <small>Search</small> <input type="text" name="search" /></form></div>
<div id="logo">
<h1><a href="">Hell, Michigan<a/></h1>
</div>
<div id="menu">
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">Things To See & Do</a></li>
<li><a href="">Where To Stay</a></li>
<li><a href="">Plan Your Trip</a></li>
<li><a href="">History</a></li>
<li><a href="">Contact</a></li>
</ul>
</div> <!--menu-->
</div> <!--header-->
<div id="mainContent">
<img src="images/main_content.png" width="791" height="209" alt="must see must do" />
</div>
<div id="attractions">
<ul>
<li id="chapel">
<h2><a href="" title="Get Hitched in Hell!">Hell Wedding Chapel</a></h2>
<p>A marriage made in hell can only get better. Tie the knot in Hell's very own
Wedding Chapel, or renew your vows before hell freezes over!</p></li>
<li id="run">
<h2><a href="" title="Run for your lives!">Run Thru Hell</a></h2>
<p>Not everyone can say that they've run thru hell. Partake in Hell's classic 5 or
10 mile race, and get a T-shirt that says, <q>I ran thru hell!</q></p></li>
<li id="lastRides">
<h2><a href="" title="Your Last Ride Awaits!">Last Rides Reunion</a></h2>
<p>The annual Last Rides Reunion is a must see event in late September. Witness over 40
hearses drive through town. Will this be your last ride?</p></li>
</ul>
</div> <!--main content-->
<div id="subContent">
<img src="images/sub_content.png" width="791" height="156" alt="choose activity" />
</div>
<div id="activities">
<ul>
<li id="activitiesOne">
<h3><a href="" title="Picnic or Hike in Hell!">Picnic or Hike</a></h3></li>
<li id="activitiesTwo">
<h3><a href="" title="Canoe or Bike in Hell!">Canoe or Bike</a></h3></li>
</ul>
</div> <!--sub content-->
<div id="socialContent">
<h4>Connect with us</h4>
<ul>
<li id="twitter">
<h5><a href="">Hell Michigan on Twitter</a></h5></li>
<li id="facebook">
<h5><a href="">Hell Michigan on Facebook</a></h5></li>
<li id="youtube">
<h5><a href="">Hell Michigan on YouTube</a></h5></li>
</ul>
</div> <!--social content-->
<div id="footer">
<p>© Hell Michigan
<a href="privacy.htm">Privacy Policy</a> |
<a href="terms.htm">Terms and Conditions</a>
</p>
</div> <!--footer-->
</div> <!--containter-->
</div> <!--main-->
</body>
</html>
CSS：
/*
Hell Michigan Demo Page
Design & Markup by Khoi Nguyen
*/
* {
margin: 0;
padding: 0;
}
body {
font-family: Rockwell, Georgia, serif;
background-color: #fff;
margin: 0;
padding: 0;
}
#menu a {
color: #fff
}
#main {
width: 791px;
margin: 0 auto;
background: #fff;
position: relative;
}
#header {
height: 118px;
background-color: #fff;
}
/*
Search-Bar
*/
#header #searchBar {
position: absolute;
left: 595px;
top: 20px;
}
#logo a:link {
height: 45px;
width: 478px;
display: block;
text-indent: -9999em;
background: url(../images/logo.png) no-repeat left bottom;
border: 0;
padding: .3em .3em;
margin: 0 .3em;
}
/*
Navigation
*/
#header #menu {
left: 791px;
bottom: 0px;
}
#menu ul {
color: #fff;
list-style-type: none;
font-family: Helvetica, sans-serif;
font-size: 1.5ex;
font-weight: bold;
text-transform: uppercase;
margin-top: 12px;
margin-left: 5px;
padding: 0 1px 0 0;
text-align: center;
}
#menu li {
float: left;
margin: 0;
padding: 0;
}
#menu li a:link {
display: block;
color: #fff;
text-decoration: none;
padding: 0 0 0 0;
margin-right: 1px;
width: 139px;
line-height: 31px;
background: url(../images/navigation_dual.jpg) no-repeat left bottom;
border: none;
}
#menu li a:hover {
color: #000;
background-position: left top;
}
#menu li a.active {
height: 31px;
width: 80px;
display: block;
color: #000;
background: url(../images/home.jpg) no-repeat;
}
#menu li a.active {
cursor: default;
}
/*
Main-Content
*/
#mainContent img {
position: relative;
margin-top: .5em;
}
#attractions ul #chapel a:link {
position: absolute;
top: 129px;
left: 328px;
width: 151px;
height: 201px;
margin: 0;
padding: 0;
background: url(../images/chapel_dual.png) no-repeat left bottom;
text-indent: -9999em;
}
#attractions ul #chapel a:hover {
background-position: left top;
}
#attractions ul #run a:link {
position: absolute;
top: 129px;
left: 482px;
width: 151px;
height: 201px;
margin: 0;
padding: 0;
background: url(../images/run_dual.jpg) no-repeat left bottom;
text-indent: -9999em;
}
#attractions ul #run a:hover {
background-position: left top;
}
#attractions ul #lastRides a:link {
position: absolute;
top: 129px;
left: 636px;
width: 151px;
height: 201px;
margin: 0;
padding: 0;
background: url(../images/last_rides_dual.jpg) no-repeat left bottom;
text-indent: -9999em;
}
#attractions ul #lastRides a:hover {
background-position: left top;
}
#attractions ul {
list-style: none;
overflow: auto;
}
#chapel p {
position: absolute;
font-size: .8em;
color: gray;
top: 340px;
left: 328px;
width: 142px;
height: 30px;
margin: 0;
padding: 0;
z-index: 1;
}
#run p {
position: absolute;
font-size: .8em;
color: gray;
top: 340px;
left: 482px;
width: 142px;
height: 30px;
margin: 0;
padding: 0;
z-index: 1;
}
#lastRides p {
position: absolute;
font-size: .8em;
color: gray;
top: 340px;
left: 636px;
width: 142px;
height: 30px;
margin: 0;
padding: 0;
z-index: 1;
}
/*
Sub-Content
*/
#activities ul {
list-style: none;
}
#subContent img {
position: relative;
margin-top: 106px;
}
#activities ul #activitiesOne a:link {
position: absolute;
top: 448px;
left: 4.5px;
width: 197px;
height: 148px;
margin: 0;
padding: 0;
background: url(../images/picnic_hike_dual.png) no-repeat left bottom;
text-indent: -9999em;
}
#activities ul #activitiesOne a:hover {
background-position: left top;
}
#activities ul #activitiesTwo a:link {
position: absolute;
top: 448px;
left: 209px;
width: 304px;
height: 148px;
margin: 0;
padding: 0;
background: url(../images/canoe_bike_dual.png) no-repeat left bottom;
text-indent: -9999em;
}
#activities ul #activitiesTwo a:hover {
background-position: left top;
}
嘗試使用的位置是：相對和位置：絕對是最後的手段。我很少使用這些屬性，因爲我幾乎可以用浮點數來完成所有的定位。 – Flauwekeul 2011-05-30 07:59:04
遷移到codereview？ – Knu 2011-05-30 18:29:13