CSS瀏覽器的兼容性 - 嵌套的div和位置

這裏是我的地盤：rickymason.net/blurbsCSS瀏覽器的兼容性 - 嵌套的div和位置

如果您在Chrome看看它，你會看到，AJAX上正確合適的負載，以及CSS正確地格式化它。

在Firefox中，它是一個不同的故事。我玩過它，但找不到問題。

這裏是我的模板（div的）：

<html> 
<head><?php echo $head; ?></head> 
<div id="wrapper"> 
    <div id="topnav"><?php echo $topnav; ?></div> 
    <div id="leftbar"> 
     <?php echo $logo; ?> 
     <img src="<?php echo $profile['avatar_loc']['location'] ?>" alt="avatar_user"/> 
     <div id="select"> 
      <?php echo $create; ?> 
      <div id="filter_select"><?php echo $category; ?></div> 
      <div id="addfilter"><?php echo $addfilter; ?></div> 
     </div> 
    </div> 
<div id="boardwrapper"> 
    <div id="boardborder"> 
     <div id="board" alt="Welcome to Blurb!"><img src="img/board/loading.gif" alt="loading"/></div> 
    </div> 
    <div id="boardbot"></div> 
</div> 
<footer> 
    <?php echo $footer; ?> 
</footer> 
</body> 
</div> 
</html>

這裏是我的CSS

.board { 
    display: table; 
    padding-left: 35px; 
    padding-top: 10px; 
} 

.board #row { 
    padding-bottom: 15px; 
} 

.board #author p { 
    position: absolute; 
    top: inherit; 
    padding-left: 3px; 
    padding-top: 53px; 
    color: white; 
    font: 16px Tahoma, Helvetica, Arial, Sans-Serif; 
    text-align: center; 
    text-shadow: 0px 2px 3px #555; 
} 

.board #author { 
    display: table-cell; 
    border: 1px solid #97cae6; 
    width: 75px; 
    height: 75px; 
} 

.board #arrow { 
    background-image: url('../img/board/corner.jpg'); 
    display: table-cell; 
    width: 35px; 
    height: 75px; 
} 

.board #subject { 
    position: relative; 
    max-height: 75px; 
    display: table-cell; 
    width: 653px; 
    max-width: 653px; 
    height: 75px; 
    border-top: 1px solid #97cae6; 
    border-bottom: 1px solid #97cae6; 
} 

.board #subject a { 
    position: absolute; 
    top: inherit; 
    padding-top: 18px; 
} 

.board #info { 
    display: table-cell; 
    width: 180px; 
    height: 75px; 
    border-top: 1px solid #97cae6; 
    border-bottom: 1px solid #97cae6; 
    border-right: 1px solid #97cae6; 
    border-top-right-radius: 20px; 
    border-bottom-right-radius: 20px; 
}

希望的東西在你跳出來，你能幫助！謝謝！

來源

2012-06-07 Ricky Mason

請問您能解釋一下發生了什麼情況或設置了jsfiddle.net頁面。 –

是什麼在FireFox搞亂CSS的格式？根據瀏覽器的不同，網站看起來會有所不同。解決方法是爲瀏覽器創建單獨的CSS頁面。使用chrome或類似命名您的當前，然後調整CSS，使其在FireFox中看起來很好，並將其命名爲FireFox。然後，您可以使用JavaScript來識別瀏覽器並獲取正確的CSS文件。 – Tony318

對不起，但這是一個可怕的建議。想象一下，爲每個瀏覽器創建一個單獨的CSS。我會說95％的瀏覽器差異的情況下可以手動修復，而不需要黑客或額外的CSS。沒有必要爲時間創建一個單獨的樣式表，從瀏覽器到瀏覽器都不匹配，現在還有大量可用的設備，想象爲每個瀏覽器管理一個CSS只是因爲該網站看起來不同。 –

在文件board.css，改變這個：

.board #arrow { 
background-image: url('../img/board/corner.jpg'); 
display: table-cell; 
width: 35px; 
height: 75px;

}

這樣：

.board #arrow { 
background: url('../img/board/corner.jpg') no-repeat; 
display: table-cell; 
width: 35px;

}

應該解決您的問題。

來源

2012-06-07 15:14:42 Jim

這個幫了很多。我應該可以解決其餘的問題。謝謝 –

沒問題，很高興能幫到你！ – Jim

CSS瀏覽器的兼容性 - 嵌套的div和位置

回答

相關問題