IE7和FF浏览器中右下角图片广告- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > IE7和FF浏览器中右下角图片广告

CSS样式表: CSS样式表规划与管理的经验总结; 3个效果超酷的FORM表单美化效果打包下载; 创建IE各版本专属CSS IE中的if语句; 不错的10个你未必知道的CSS技巧; 一点小小的创意css鼠标放上去则显示电话号码; 淘宝段正淳的css笔记大全; CSS实现的一个图片放大展示的一种思路; 又一实用的常用CSS缩写语法收集; 对于IE7、FF、OP清除浮动的最优方法; 多浏览器下IE6 IE7 firefox li 间距问题; input文本框样式代码实例; div+css实现自适应宽度按钮; h1标签的使用技巧; 用margin和overflow属性实现div间距的方法; 非常漂亮的css星级效果总结; 使用CSS解决文字环绕图片问题的代码; css利用A标签的背景可能作出很有意思的效果; 写CSS_关于Border你可能需要注意的地方; 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码; 页面布局黄金比例[图片]

No. « ‹ 87 88 89 90 › »

技术文章搜索

关键字

CSS样式表中的 IE7和FF浏览器中右下角图片广告

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 91 ::

收藏到网摘: n/a

CSS 框架BlueTrip特性 CSS实例:通过定义渐变边框给图片加阴影

互联网提供了很多种“将广告始终定位到网页右下角”的解决方案，大多会用到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;ruanchen.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="/upload/tech/20091009/20091009150946_cee631121c2ec9232f3a2f028ad5c89b.jpg" /> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

必要元素：
DOCTYPE声明、 html标签、body标签、一个ID为test的div。

CSS 框架BlueTrip特性 CSS实例:通过定义渐变边框给图片加阴影

CSS样式表 中的 IE7和FF浏览器中右下角图片广告

评论 (0) All

CSS样式表中的 IE7和FF浏览器中右下角图片广告