跨瀏覽器兼容網頁

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

來源

2015-02-17 Romey B

以下是CSS： – 2015-02-17 20:44:21

將圖片包含在圖片中可能會很有幫助 – floor 2015-02-17 20:45:22

從您的服務器下載的CSS似乎有一些虛假的字符。例如：'| #content {' - 這是什麼領先的'|'？ – 2015-02-17 20:51:48

對於跨瀏覽器的網站，這總是一個問題。當你進入Web開發時，你將學會解決這些問題。而且IE也會一直讓你頭疼！

現在請記住，這是一個解決方案，讓它很好，並且彼此相鄰，沒有瘋狂的差距，並且可以控制差距。有多種方法可以解決HTML和CSS問題。這只是我通常這樣做的方式。

爲您的內容和正確的問題。你有一個漂浮在右邊，另一個在左邊。通常當你想讓它們靠近彼此或者相互堆疊在一起時，你就會將它們都浮在左邊。然後他們之間的差距有一個「填充」格。

這類似於你的代碼，我只是按比例下來，所以我可以看到它自己：

#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/

並請，如果我錯過了一些東西讓我知道或編輯這篇文章！

來源

2015-02-17 21:11:52

跨瀏覽器兼容網頁

回答

相關問題