HTML/CSS：除了谷歌瀏覽器

對不起，如果該問題的標題是弱，我不能完全總結我的問題成一個活潑的標語......HTML/CSS：除了谷歌瀏覽器

我的工作在網站上（使用Joomla）我不得不在頁面的右側插入一個DIV，作爲邊欄。爲了使其顯示在「常規」頁面內容的「上方」（或「之上」，我的意思是在z軸上），我在其左側使用了負邊距，覆蓋了它的整個寬度，所以它會簡單地浮動到右側並坐在那裏，其中在ff和IE中正常工作。

，因爲我已經很少能碰到與Chrome瀏覽器的IE被罰款的問題，我沒有刻意去檢查，直到很晚：

現在我看到，在Chrome瀏覽器中，DIV只是坐在下面（底部）常規內容;儘管「內聯」顯示類型和負邊距。現在我嘗試了一些荒謬的事情來使它工作，但由於某種原因它不會。

有人能告訴我如何讓它在Chrome中工作嗎？

HTML：

<div class="cframe"> 
     <div class="content"> 
      ... 
     </div> 
     <div class="sideright"> 
      ... 
     </div> 
</div>

CSS：

div.cframe { 
    display: table; 
    vertical-align: top; 
} 
div.content { 
    display: inline-table; 
    width: 751px; 
    padding: 60px; 
} 
DIV.sideright { 
    width: 200px; 
    float: right; 
    display: block; 
    position: relative; 
    top: 320px; 
    margin: 0px 0px 0px -200px; 
}

...這就是我堅持了，現在，這一切都相當難看。

[鏈接到現場頁面的解決方案已經廣泛應用於去除]

（側邊欄是div歸類sideright，幷包含標題爲Archiv模塊）

預先感謝您

來源

2014-03-28 Ben Philipp

更改div.content CSS來：

div.content { 
    display: inline; 
    float: left; 
}

來源

2014-03-28 18:00:26

謝謝指點先生或女士顯示它！！我不敢相信我忽略了這一點：D –

您正在使用浮動，但然後將位置設置爲相對。你應該刪除你的CSS的相對部分的側邊，它應該解決問題

編輯：甚至更好，你應該改變位置爲絕對。

來源

2014-03-28 17:49:00 IronWilliamCash

將你的容器div設置爲position：relative，然後position：絕對你的sidebar相對於那個。

.cframe { 
    display: table; 
    vertical-align: top; 
    position: relative; 
} 

.sideright { 
    width: 200px; 
    position: absolute; 
    top: 320px; 
    right: 0; 
}

來源

2014-03-28 17:49:20 robbclarke

我沒有測試上面的答案，但我把他們的話，他們的工作。但是，您的問題引起了我的注意，因爲我認爲您正在尋找瀏覽器黑客。

有一些方法可以告訴元素在特定瀏覽器上的行爲不同。這種情況有時會發生在瀏覽器之間，最好的方法是對每個瀏覽器進行破解並給出具體說明。對於Chrome，當然你必須使用webkit。

這將是語法的簡單的榜樣：

<p>TEST</p> 


p {color:green;} 
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
     p {color:red;} 
}

嘗試DEMO在多個瀏覽器，並注意如何只有鉻將以紅色

來源

2014-03-28 18:06:14 LOTUSMS

謝謝，但正如你意識到我正在尋找一個通用的解決方案。當涉及到瀏覽器黑客時，我更喜歡JS來獲取用戶代理（儘管我聽到的是不好的味道），但當涉及到跨版本兼容性時，它似乎比這些瀏覽器黑客更可靠。這有沒有一個實際的缺點？ –

css比JS和打火機更可靠。我儘可能地在css中構建，並使用JS作爲支持系統，用於那些邏輯或算法超出css能力範圍的操作。但許多開發人員對JS的主要核心感到滿意。我指示我的所有開發人員使用css主要是 – LOTUSMS

ps.s.我知道你已經有了答案，那很好。我以爲你想知道你可以使用黑客以及\ – LOTUSMS

HTML/CSS：除了谷歌瀏覽器

回答

相關問題