IE7和FF浏覽器中右下角圖片廣告

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> IE7和FF浏覽器中右下角圖片廣告

IE7和FF浏覽器中右下角圖片廣告

編輯：CSS進階教程

網頁制作poluoluo文章簡介：互聯網提供了很多種“將廣告始終定位到網頁右下角”的解決方案，大多會用到javascript，其實僅調用樣式表就可以實現該效果。

互聯網提供了很多種“將廣告始終定位到網頁右下角”的解決方案，大多會用到javascript，其實僅調用樣式表就可以實現該效果。
以下萬惡的代碼主要是寫給IE6的，在IE7和FF浏覽器中，只需要position:fixed就可以將圖層定義到網頁的任意位置。

相關樣式：

body{margin:0;border:0;height:100%;overflow-y:auto;}
#test{display:block; bottom:3px; right:3px; width:130px; position:fixed;}
/* 以下是寫給IE6的 */
* html #test{position:absolute;right:18px}
* html{overflow-x:auto; overflow-y:hidden;}

演示頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{margin:0;border:0; height:100%;overflow-y:auto;} #test {display:block; bottom:3px; right:3px; position:fixed;} * html #test {position:absolute; right:18px} * html{overflow-x:auto; overflow-y:hidden;} </style> <title>Fixed layer in MSIE.position:fixed;poluoluo.com</title></head> <body> <div> <div> <h1> Fixed layer in MSIE</h1> <p> This is a simulation of CSS "position: fixed" for MSIE. The main text on this page is contained in a 100% high, scrollable <div>. The scrollbar belongs to the <div>, not to the <body>. The ordinary <body> content is found in the fixed green box. All HTML and CSS on this page should follow the W3C spec except overflow-y: hidden, which is used for cosmetical purposes in earlier IE versions. </p> <h2> Browser support </h2> <p>The browsers listed below are those I have tested in so far. I don't know how other browsers will behave. Because of the <strong>problems in Opera 7.10</strong> I recommend using Conditional Comments (section 3, example A), which hides CSS from all browsers except MSIE 5+. Other browsers like Mozilla and Opera may use CSS position: fixed instead (that's how I've done it on this page).</p> <p> Note that if you hide parts of the CSS from non-MSIE browsers (like on this page) the details about non-MSIE browsers below do not apply. </p> <h3>Supporting browsers</h3> <ul> <li>MSIE 4.72/win</li> <li>MSIE 5.0/win</li> <li>MSIE 6.0</li> <li>Netscape 6.1+</li> <li>Mozilla</li> <li>Opera 7.0</li> <li>Opera 7.11 (<strong>not 7.10</strong>)</li> </ul> <h3>Non-supporting browsers</h3> <ul> <li>Netscape 4.x (degrades gracefully)</li> <li>MSIE 4/mac</li> <li>MSIE 5/mac (not sure about the details)</li> <li>Opera 6.0 (degrades gracefully)</li> <li><strong>Opera 7.10 (freezes)</strong></li> </ul> <h3>General problems</h3> <ul> <li>In IE5 and IE6/quirk mode double scrollbars will appear unless one adds the non-standard CSS overflow-y: hidden property.</li> <li>Content must be contained in either the scrollable or the fixed <div>, not outside any of them.</li> <li>If you apply margin or padding to div#fixedcontent, Mozilla adds this to the 100% height and width which results in double scrollbars. Because of that I have nested a div#innerbox and apply the padding to that instead. This does not seem necessary for MSIE 6.</li> <li>The scrolling content must be absolutely positioned for Opera 7.</li> <li>The fixed content can obscure other content, and can itself easily become obscured in small browser windows.</li> </ul> <p> </p> <h2>'position:fixed' in IE</h2> <p>Since the project I was working on for Q42 together with Sjoerd had to wait a little we thought it would be a good idea to update the site of their <abbr>WYSIWYG</abbr> <abbr>XML</abbr> Editor, Xopus. There are still a few minor mistakes on the site (validating and all that), but those do not make the site inaccessible or so. We also could not use <abbr>UTF-8</abbr> (learn about <abbr>UTF-8</abbr>, leer over <abbr>UTF-8</abbr>) because the current httpd.conf file did not allow specifying a .htaccess and modyfying the server configuration file was not considered to be a good idea (and nobody who was around was sure if we were just allowed to read it, or if we could overwrite as well) just before the weekend. I guess those things will be fixed eventually. (Obviously, the same is true for putting mod_negotation to work.) </p> <p>Anyway, the cool thing of the original site was the fixed top and bottom. It was done with some scripting that did not work cross browser. In Mozilla you could not scroll and in Safari the content was not shown. Although Xopus is a product just for Internet Explorer thanks to not supporting of (for example) contentEditable="true" in others the website could at least be made accessible so people using other browser then Internet Explorer could check what the product is about. </p> <p>However, emulating position:fixed was rather tricky. I first thought of using some fixed positioning technique I developed ages ago, but did not quite emulate the intented effect. (In Internet Explorer it looks like you are using frames, which is not what we wanted.) There are some examples on the internet but most made the fixed element "flicker". You can see that here. Of course, you want better; position:fixed in IE. Although there are workarounds for Internet Explorer 6.0 in standards mode, just use quirks. It is so much easier, especially if you have to cope with Internet Explorer 5.5 (and even 5.0) as well. </p> <p>The difference between the two files is background:url(foo) fixed. Although the existence of the file foo is not really needed, make sure 'foo' is some zero byte file to prevent stupid 404 requests. You might think the reference to foo is not needed at all and you can just write background-attachment:fixed. Unfortunately, that is incorrect. Internet Explorer probably runs a bit different when this setting is set. </p> <p>All other things are pretty clear, I hope. Have fun. </p> <p> </p> </div> </div> <div id="test"> <img src="/files/090701/1_080301.jpg" /> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

必要元素：
DOCTYPE聲明、 html標簽、body標簽、一個ID為test的div。

上一頁:CSS Sprites網頁圖片整合方法
下一頁:直接將HTML頁面打印頁面的設計

CSS進階教程

CSS實例教程:reflow: 網頁制作poluoluo文章簡介：在CSS規范中有一個渲染對象的概念，通常用一個盒子（box, re
使用em指定字體尺寸時的麻煩: 　　有幾種方法可以用來指定 Web 頁面上的字體尺寸。首先，你可以使用關鍵字，比如small 或者
優先選擇W3C推薦的標准規范: 網頁制作poluoluo文章簡介：如何遵循標准，其實標准有很多，結構標准，表現標准，行為標准。選擇標

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS知識總結 CSS常用技巧匯總 CSS設計制作長度高度不一樣的網頁區塊 CSS應用基礎教程(6) 區塊性質兼容浏覽器的網頁細線表格設計 IE7與web標准設計（1）旁門左道你沒見過的CSS效果無hack無js全兼容text-overflow-ellipsis效果 CSS標示導航條當前所在頻道網頁設計資源分享:國外CSS和javascript教程

DIV CSS 佈局教程網

相關文章