【发布时间】：2015-03-02 06:35:44
【问题描述】：
我确定我不是第一个遇到这种情况的人，但问题是：我的网站在 Firefox 中看起来很棒，但在 Dreamweaver 和 Chrome 中却很糟糕。我一直在 Firefox 中实时编辑 CSS 以使其正确，然后我将其复制并粘贴到 Dreamweaver 中，结果很糟糕。
这是它在 Firefox 中的外观和外观：
http://postimg.org/image/7gcm1tjxh/
在 Chrome/Dreamweaver 中：
http://postimg.org/image/ikq6ho2dp/
如您所见，顶部导航栏是垂直的，而不是水平的。在 Chrome 中，页脚也被捆绑在一起。
我继续并包含了我的所有代码，因为我可能在另一个元素中指定了与其他内容相矛盾的内容。
有什么解决方案可以让菜单恢复水平并且在每个浏览器中页脚看起来都正确？
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* HTML5 display-role reset for older browsers */
ol, ul {
list-style: none;
}
html {
background-color:#96d5cd;
}
#container {
width:980px;
border:1px solid #1f5c54;
background-color:white;
margin:2em auto;
}
hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
clear:both;
}
#footer {
text-decoration:none;
color:black;
text-transform:uppercase;
font-family:amaranth, trebuchet, verdana, sans-serif;
margin-left:12px;
clear:both;
}
#footer li {
display:inline;
clear:both;
}
#footer ul{
margin-left:-37px;
margin-top:-30px;
}
#main {
position:relative;
background-color:#fec161;
height:700px;
margin-top:-10px;
margin-left:10px;
margin-right:10px;
}
#main #content {
margin-top:10px;
margin-left:10px;
margin-right:10px;
height:400px;
text-align:justify;
}
#nav {
text-decoration: none;
color: black;
text-transform: uppercase;
font-family: patua-one;
font-style: normal;
font-weight: 400;
background-color:#fec161;
width:920px;
height:70px;
margin-left:10px;
margin-top:60px;
}
#nav li{
display:inline;
}
#navigation {
margin-left:-30px;
padding-top:15px;
}
#social {
float:right;
}
#social li {
margin-right:10px;
margin-bottom:20px;
display:inline;
}
a {
text-decoration: none;
color: black;
margin-top: 0px;
font-style: normal;
}
a:hover {
text-decoration:none;
color:#1e777b;
}
#feature {
padding-left:10px;
overflow:hidden;
width:960px;
margin-top:-30px;
}
#footer {
font-family:amaranth;
text-decoration:none;
color:black;
text-transform:uppercase;
margin-top:0px;
}
#header {
font-family:patua-one;
text-decoration:none;
color:black;
text-transform:uppercase;
margin-top:0px;
font-size:24px;
}
#header img {
float:left;
margin-left:10px;
margin-top:10px;
}
h1 {
font-size: 24px;
font-family: patua-one;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
padding-top:10px;
}
#column1 {
float:left;
width:275px;
margin-left:10px;
margin-right:30px;
text-align:justify;
}
#column2 h2{
float:left;
width:275px;
margin-left:90px;
}
#column2 {
float:left;
width:275px;
margin-right:0px;
text-align:justify;
margin-left:20px;
}
#column3 {
float:right;
width:275px;
margin-right:10px;
text-align:justify;
}
#column3 h2 {
float:left;
width:275px;
margin-left:220px;
}
h2 {
font-weight: 400;
text-transform: uppercase;
line-height: 100%;
@import url(http://fonts.googleapis.com/css?family=Patua+One);
font-family: patua-one;
font-style: normal;
font-size:24px;
}
#columns {
margin-top:20px;
}
h3 {
font-family:amaranth;
}
div span.welcome {
font-size: 24px;
font-family: patua-one;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WELCOME :: Katie J Hunter :: Graphic Designer</title>
<link ref="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/images/favicon.ico" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Patua+One">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/patua-one:n4:default;amaranth:n4:default.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
<br />
<ul id="social">
<p><li><a href="https://www.facebook.com/pages/Katie-Hunter-Graphic-Designer/1532575640337137" target="_blank"><img src="images/socialmedia_facebook.png" alt="Facebook" /></a></li>
<li><a href="https://www.twitter.com/kinetickatie" target="_blank"><img src="images/socialmedia_twitter.png" alt="Twitter" /></a></li>
<li><a href="https://www.linkedin.com/in/katiejohunter" target="_blank"><img src="images/socialmedia_linkedin.png" alt="Linked In" /></a></li>
</p></ul>
<ul><p>
<div id="navigation">
<li><a href="index.html" target="_blank">Home</a> :: </li>
<li><a href="about.html" target="_blank">About</a> ::</li>
<li><a href="services.html" target="_blank">Services</a> :: </li>
<li><a href="portfolio.html" target="_blank">Portfolio</a> :: </li>
<li><a href="blog.html" target="_blank">Blog</a> :: </li>
<li><a href="contact.html" target="_blank">Contact</a></li>
</div><!-- end navigation --></ul>
</div><!-- end header -->
<div id="feature">
<img src="images/FeatureBanner.jpg" alt="banner" class="banner" /><br>
</div><!-- end feature -->
<div id="main">
<div id="content">
<h1><span class="welcome">Welcome!</span></h1>
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odi o nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien velit, dictum vel semper id, vestibulum eu nisi. Phasellus ac ornare sapien. Praesent eget libero mollis ipsum eleifend lacinia non ut ligula. Sed quis sem at est laoreet aliquet. Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim. Etiam odio nibh, bibendum vel eros malesuada, elementum blandit quam. Integer aliquet finibus felis et eleifend.</h3>
</div><!-- end content -->
<div id="columns">
<div id="column1">
<h2>Services</h2>
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column1 -->
<div id="column2">
<h2>Clients</h2>
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column2 -->
<div id="column3">
<h2>Blog</h2>
<hr style="height:1px; width:100%; border:1px solid black; background-color:black;" />
<h3>Donec ornare, ante ut fermentum ullamcorper, enim purus vehicula sem, non feugiat dolor nulla sed enim.</h3>
</div><!-- end column3 -->
</div><!-- end columns -->
</div><!-- end main -->
<div id="footer">
© copyright 2015 katie j hunter • all rights reserved</span>
<ul>
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> |
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> |
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> |
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> |
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
<li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
</ul>
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>【问题讨论】：
-
尝试使用css中的webkit属性来支持不同的浏览器..
标签： html css google-chrome firefox navigation