Question

我创建了我的index.html页面以及styles.css页面。当我从Notepadd ++运行它时，它在Chrome上看起来不错，但在其他浏览器IE和Firefox上却看不到。但是当我将它上传到我的托管网站时，它看起来在Chrome上间隔开，并且仍然在其他两个浏览器上搞乱。我网站的链接是http://79.170.40.54/romeyb.com/，我已经包含了我的代码。如何解决跨浏览器兼容的问题？

<!DOCTYPE html>
  <html>
  <head>

    <title>Home</title>

    <meta content="text/html; charset=utf-8" http-equiv="content-type">

    <link rel="stylesheet" href="stylesheets/style.css" type="text/css">
    <!--<link rel="stylesheet" href="stylesheets/style-ff.css"       type="text/css">-->

</head>

<body>
<br>

<script src="script.js"></script>

<div id="header">

    <div id="logo">
        <h1><img style="width: 200px; height: 100px;" alt="romeyb" src="images/logo.png"></h1>
            <div id="navbar">
                <ul>
                    <li class="home"><a href="index.html">home</a></li>
                    <li class="about"><a href="about.html">about</a></li>
                    <li class="blog"><a href="blog.html">blog</a></li>
                    <li class="resume"><a href="resume.html">resume</a></li>
                    <li class="contact"><a href="contact.html">contact</a></li>
                </ul>
            </div><!--navbar closing div-->
    </div><!--logo closing div-->  

</div><!--header closing div--> 

<div class="gap"></div>
<div id="content">
    <h1>Welcome to RomeyB.com <br></h1>
        <p>Welcome to the website, romeyb.com, created by Romey B.   This website is to showcase my skills in HTML and         CSS,      and content will be added as I go.</p>  

        <p>I will eventually add Javascript and jQuery to this site and will also design as I go.</p>  

        <p>I'm also learning Wordpress to become familiar with building websites using the Content Management System (CMS)      technology, and to begin blogging in which I will discuss my personal battles with social anxiety, growing up without           a father, and growing up as a non-stereotypical Black American.</p>  

        <p>I hope you enjoy the content that I will be posting here and I thank you for sharing this journey with me.</p> 
            <br>
</div><!--content closing div-->

<div id="right">

    <p>This portion will consists of ads and possibly some updates to the   website.  Haven't decided yet.</p>
    </div><!--right closing div-->

    <div id="footer">&copy; 2015 romeyb.com</div><!--footer closing div-->
    </body>
    </html>

Answer 1

对于跨浏览器网站，这始终是个问题。当您进入Web开发时，您将学会解决这些问题。 IE也总是让你头疼！

现在请记住，这是一个让它变得更好并且彼此相邻而没有疯狂差距并且可以控制差距的解决方案。有多种方法可以解决HTML和CSS问题。这就是我通常这样做的方式。

为您的内容和正确的问题。你有一个浮动到右边，另一个浮动到左边。通常当你想要它们彼此靠近或相互堆叠时，你将它们向左漂浮。然后，在它们之间有一个“填充”div。

这类似于我的代码我只是按比例缩小，所以我自己可以看到它：

#content {
  background-color: #E6E6FA;
  float: left;
  height: 400px;
  width:1000px;
  marign: 0 0 20 20;


}
#filler{
  float: left;
  height: 400px;
  width:50px;
  marign: 0 0 20 20;

}

#right {
  background-color: #E6E6FA;
  float: left;
  height: 400px;
  width:100px;
  marign:5 5 20 20;
}

HTML：

<div id="content">
    //your content
</div><!--content closing div-->

<div id="filler"> 
</div>

<div id="right">
  //your ads
</div><!--right closing div-->

它在我的chrome和firefox中运行。它看起来不错。这是帮助我浮动div并理解它的东西：

http://css-tricks.com/all-about-floats/

这是旧的，但我认为仍然相关：

http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/

如果我错过了什么，请告诉我或编辑这篇文章！

符合跨浏览器的网页

1 个答案: