網站在Firefox中看起來很棒，在Chrome中看起來很糟糕
[英]Site looks great in Firefox, Bad in Chrome
問題描述
我確定我不是第一個體驗這一點的人，但問題在於：我的網站在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>
3 個解決方案
解決方案1
0 2015-03-02 06:44:55
在你的css中，你指定了#nav li ，而你想要內聯的元素是#navigation li
你也將footer ul作為margin-top: -37px ，這導致ul與版權信息捆綁在一起。
PS：我無法打開圖像，因為我在代理后面，但我猜這是你想要的。
解決方案2
0 2015-03-02 06:46:35
您的HTML無效。 您使用<p>和<div>標記作為列表元素（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 id="navigation">
<ul>
<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>
</ul>
</div><!-- end navigation -->
解決方案3
0 已采納 2015-03-02 09:37:09
我建議使用bootstrap框架工作。 它支持最新的移動和瀏覽器。
[http://www.bootply.com/4kihU2HqGf][1]
[1]: http://getbootstrap.com/
/* CSS used here will be applied after bootstrap.css *//* CSS used here will be applied after bootstrap.css */
/* CSS used here will be applied after bootstrap.css */
.logo {
width: 210px;
}
.jumbotron {
}
h1.name {
color: #125952;
border-bottom: 4px solid #ffbc6b;
margin-bottom: -19px;
}
.primary {
background-color: #ffbc6b;
border-radius: 1px;
}
.main-content {
background-color: #ffbc6b;
}
.navbar-default .navbar-nav > li > a {
color: #000;
}
.welcome {
border-bottom: 4px solid #000;
color: #000;
padding-bottom: 8px;
}
p {
color: #000;
font-weight: 400px;
}
.columns {
color: #000;
border-bottom: 3px solid #000;
padding-bottom: 8px;
margin-bottom: 8px;
}
section {
background-color: #ffbc6b;
padding: 10px;
}
.row {
background-color: #ffbc6b;
}
.footer {
background-color: #fff;
margin: -12px 0px 0 -44px !important;
}
.navbar-default {
border: none;
}
.copyright{
margin-top: 10px;
}
<div class="container">
<header>
<div class="logo">
<h1 class="name">Katie Hunter</h1>
<h3 class="subtitle">Graphic Designer</h3>
</div><!-- end logo -->
<nav class="navbar navbar-default primary">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">HOME :: <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT ::</a></li>
<li><a href="#">SERVICES ::</a></li>
<li><a href="#">PORTFOLIO ::</a></li>
<li><a href="#">BLOG ::</a></li>
<li><a href="#">CONTACT ::</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- end nav -->
</header><!-- header -->
<div class="jumbotron">
<h1>Your images goes here!</h1>
</div>
<div class="container-fluid main-content">
<div class="col-sm-12">
<h1 class="welcome">Welcome</h1>
<p><strong>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.
It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites still in their infancy. Various versions have
evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).</strong></p>
</div><!-- end of col -->
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
<div class="col-sm-4">
<h2 class="columns">SERVICES</h2>
<p>lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book.</p>
</div>
</div><!-- end of container-fluid -->
<div class="container copyright">
<div class="col-sm-6 ">
<p>© COPYRIGHT 2015 Katie J Hunter - ALL RIGHTS RESERVED</p>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav footer">
<li><a href="#">HOME <span class="sr-only">(current)</span></a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!-- /.container-fluid --></nav></div>
ie9 / CSS：彈出菜單在ie9中不起作用，但是在Firefox / Chrome中看起來不錯
[英]ie9/CSS: Flyout menu not working in ie9, but looks great in Firefox/Chrome
移動網站在實際的 iPhone 12 VS chrome/firefox 開發工具上看起來不同？
[英]Mobile site looks different on an actual iPhone 12 VS chrome/firefox dev tools?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
在Chrome和IE上看起來不錯…在Firefox上不好？
ie9 / CSS：彈出菜單在ie9中不起作用，但是在Firefox / Chrome中看起來不錯
Inputbox在Firefox和Chrome中看起來有所不同
移動網站在實際的 iPhone 12 VS chrome/firefox 開發工具上看起來不同？
沒有表格的按鈕在Firefox中看起來很糟糕
chrome中的字體看起來比Firefox更好
我的網站在Firefox中的瀏覽器與Chrome瀏覽器不同
谷歌字體在 Chrome 和 Firefox 中看起來不同
表格在Firefox中看起來不錯，但在Chrome中卻一團糟
Bootstrap模態在Chrome和Firefox中看起來有所不同
相關標簽