谷歌瀏覽器，html工具欄 - 始終處於頂級問題

我正在爲Chrome瀏覽器的工具欄工作，作爲擴展的一部分。比方說，該工具欄是由下面的CSS描述一個簡單的矩形：谷歌瀏覽器，html工具欄 - 始終處於頂級問題

#top{ 
    display: none; 
    width: 100%; 
    background: red; 
    z-index:9999999; 
    height:40px; 

}

我注入看起來更不像工具欄：

：

<body> 
    <div id="panel_left"> 
    .... 
    </div> 
    <div id="panel_right"> 
    .... 
    </div> 
</body>

而且我通過它注入到IFRAME

$("body").before('<iframe name="top" id="top" frameborder="0"></iframe>'); 
var top = document.getElementById("top"); 
top.src = chrome.extension.getURL("top.html");

問題出現在某些網頁上，因爲它們的CSS可以覆蓋我的工具欄。我希望工具欄從網站最頂端開始，高度爲40px，然後顯示通常的網頁內容。

你有任何想法如何做到這一點（或者說改進它，因爲它適用於某些網頁）

來源

2011-03-25 dbq

只是爲了尋找同樣的解決方案的所有用戶。它的工作原理：

body 
{ 
position: fixed; 
width: 100%; 
height: 100%; 
position:relative; 
}

來源

2011-03-25 20:32:44 dbq

你有沒有嘗試添加：

top: 0; 
left: 0; 
margin: 0; 
padding: 0;

之前添加此插入您工具欄：

// Take down the webPage 
document.getElementsByTagName('body')[0].style.marginTop = '39px'; 
// Or more if your toolbar is greater

來源

2011-03-25 21:14:51 Sindar

請在看看：HTTP：//www.emposha .com /這是網站的例子，工具欄仍然無法正常工作...如果你有任何想法如何解決它，將是偉大的！ – dbq 2011-03-26 00:20:40

我在這個網站上工作，你能提供一個什麼樣的屏幕？ – Sindar 2011-03-26 15:06:42

當然可以！我爲您提供了emposha.com頂部的一個屏幕。紅色矩形就是我的工具欄，所以你可以看看會發生什麼： http://www.biqueter.com/fail.png – dbq 2011-03-26 18:48:03

谷歌瀏覽器，html工具欄 - 始終處於頂級問題

回答

相關問題