跨浏览器兼容的网页答案

【问题标题】：cross-browser compliant webpage跨浏览器兼容的网页
【发布时间】：2015-02-18 05:11:52
【问题描述】：

我创建了我的 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>

【问题讨论】：

将图像包含在它的预期外观中可能会有所帮助
从您的服务器下载的 CSS 中似乎有一些虚假字符。例如：|#content { - 前面的 | 是什么？
您的链接已损坏：79.170.40.54/romeyb.com/script.js“加载资源失败：服务器响应状态为 404（未找到）”。虽然我不知道你是否对 JS 进行了任何样式更改。所以这可能不是问题
你有浮动的问题我以前一直有这个问题。也是的|字符不应该在那里，我确定 * 是无意的。

标签： html css cross-browser

【解决方案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/

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

【讨论】：