个人中心
gpt4 book ai didi

html - 网站在 Firefox 中看起来很棒，在 Chrome 中看起来很差

转载 作者：行者123 更新时间：2023-11-28 08:19:59 25 4
gpt4 key购买 nike

我确定我不是第一个遇到这种情况的人，但问题是:我的网站在 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>

最佳答案

我建议使用引导框架工作。它支持最新的手机和浏览器。

[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>

关于html - 网站在 Firefox 中看起来很棒，在 Chrome 中看起来很差，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28803919/

25 4 0
文章推荐： c# - 方向 rtl 在 wkhtml 到 pdf 中不起作用
文章推荐： html - 有没有办法在电子邮件模板中使用其他网站字体？
文章推荐： html - 多级滚动菜单
文章推荐： css - 使用 CSS 将鼠标悬停在第二个元素上时隐藏第一个元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com