0
我確定我不是第一個體驗這個的人，但問題來了：我的網站在Firefox中看起來不錯，但在Dreamweaver和Chrome中很糟糕。我一直在Firefox中編輯CSS直播，然後將其複製並粘貼到Dreamweaver中，這一切都很棘手。網站在Firefox中看起來不錯，在Chrome中很糟
下面是它應該看與不看在Firefox的方式：
http://postimg.org/image/7gcm1tjxh/
中和鉻/ 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 {
\t list-style: none;
}
html {
\t background-color:#96d5cd;
}
#container {
\t width:980px;
\t border:1px solid #1f5c54;
\t background-color:white;
\t margin:2em auto;
}
hr {
padding:0px;
margin:0px;
display:block;
border-bottom: 1px solid black;
clear:both;
}
#footer {
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t 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 {
\t text-decoration: none;
\t color: black;
\t text-transform: uppercase;
\t font-family: patua-one;
\t font-style: normal;
\t 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 {
\t text-decoration: none;
\t color: black;
\t margin-top: 0px;
\t font-style: normal;
}
a:hover {
\t text-decoration:none;
\t color:#1e777b;
}
#feature {
padding-left:10px;
overflow:hidden;
width:960px;
margin-top:-30px;
}
#footer {
\t font-family:amaranth;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
}
#header {
\t font-family:patua-one;
\t text-decoration:none;
\t color:black;
\t text-transform:uppercase;
\t margin-top:0px;
\t font-size:24px;
}
#header img {
\t float:left;
margin-left:10px;
margin-top:10px;
}
h1 {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t 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 {
\t float:left;
\t width:275px;
\t margin-left:220px;
}
h2 {
\t font-weight: 400;
\t text-transform: uppercase;
\t line-height: 100%;
\t @import url(http://fonts.googleapis.com/css?family=Patua+One);
\t font-family: patua-one;
\t font-style: normal;
\t font-size:24px;
}
#columns {
\t margin-top:20px;
}
h3 {
font-family:amaranth;
}
div span.welcome {
\t font-size: 24px;
\t font-family: patua-one;
\t font-style: normal;
\t font-weight: 400;
\t 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">
\t <div id="header">
<img src="images/KatieHunterLogo.png" alt="Katie Hunter Graphic Designer Logo" /><br />
<br />
<ul id="social">
\t <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>
\t </div><!-- end header -->
<div id="feature">
\t <img src="images/FeatureBanner.jpg" alt="banner" class="banner" /><br>
</div><!-- end feature -->
<div id="main">
\t <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>
\t \t </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;" />
\t <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;" />
\t <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 -->
\t </div><!-- end columns -->
</div><!-- end main -->
\t <div id="footer">
© copyright 2015 katie j hunter • all rights reserved</span>
<ul>
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/index.html" target="_blank">Home</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/about.html" target="_blank">About</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/services.html" target="_blank">Services</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/portfolio.html" target="_blank">Portfolio</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/blog.html" target="_blank">Blog</a></li> |
\t \t <li><a href="file:///MacHD/Users/Katie/Desktop/MyNewPortfolio/contact.html" target="_blank">Contact</a></li>
\t </ul>
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>
嘗試在css中使用** webkit **屬性來支持不同的瀏覽器。 – SHAZ 2015-03-02 06:39:23