IE7和FF浏览器中右下角图片广告

2016-02-20 00:04 26 1 收藏

get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是IE7和FF浏览器中右下角图片广告，一起来学习了解下吧！

【 tulaoshi.com - Web开发】

互联网提供了很多种将广告始终定位到网页右下角的解决方案，大多会用到javascript，其实仅调用样式表就可以实现该效果。
以下万恶的代码主要是写给IE6的，在IE7和FF浏览器中，只需要position:fixed就可以将图层定义到网页的任意位置。

相关样式：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）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"headmeta 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;}/styletitleFixed layer in MSIE.position:fixed;webjx.com/title/headbodydivdivh1 Fixed layer in MSIE/h1p 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. /ph2 Browser support /h2pThe browsers listed below are those I have tested in so far. I don't know how other browsers will behave. Because of the strongproblems 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)./pp 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. /ph3Supporting browsers/h3ulliMSIE 4.72/win/liliMSIE 5.0/win/liliMSIE 6.0/liliNetscape 6.1+/liliMozilla/liliOpera 7.0/liliOpera 7.11 (strongnot 7.10/strong)/li/ulh3Non-supporting browsers/h3ulliNetscape 4.x (degrades gracefully)/liliMSIE 4/mac/liliMSIE 5/mac (not sure about the details)/liliOpera 6.0 (degrades gracefully)/lilistrongOpera 7.10 (freezes)/strong/li/ulh3General problems/h3ulliIn IE5 and IE6/quirk mode double scrollbars will appear unless one adds the non-standard CSS overflow-y: hidden property./liliContent must be contained in either the scrollable or the fixed <div>, not outside any of them./liliIf 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./liliThe scrolling content must be absolutely positioned for Opera 7./liliThe fixed content can obscure other content, and can itself easily become obscured in small browser windows./li/ulp /ph2'position:fixed' in IE/h2pSince 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 abbrWYSIWYG/abbr abbrXML/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 abbrUTF-8/abbr (learn about abbrUTF-8/abbr, leer over abbrUTF-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.) /ppAnyway, 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. /ppHowever, 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. /ppThe 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. /ppAll other things are pretty clear, I hope. Have fun. /pp /p/div/divdiv id="test"img src="/files/090701/1_080301.jpg" //div/body/html
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

来源:http://www.tulaoshi.com/n/20160220/1631174.html

上一篇：教你开启Win8的“上帝模式”/God Mode
下一篇： IE中img多出5px的空白解决4种方法

看过《IE7和FF浏览器中右下角图片广告》的人还看了以下文章更多>>

ie浏览器怎么拦截广告？

标签：浏览器

ie浏览器怎么拦截广告？很多朋友不喜欢使用系统自带的IE浏览器，究其原因，除了多标签浏览不方便外，就是没有各种丰富的插件功能，比如广告拦截。随着IE9的多标签浏览的实现，很多人又回到了IE的怀抱，但是广告拦截的功能还是无法实现，那么，我们可不可以自己动手改造一下呢?下面小编就告诉大家如何设置IE不用插件也能拦截广告。 ...

IE浏览器如何去广告

标签：浏览器

IE浏览器如何去广告首先开启追踪保护，打开IE，点击右上角工具按钮。选择管理加载项-开启追踪保护复制下面文本，将txt后缀名为html， Add TPL: a href="javascript:window.external.msAddTrackingProtectionList('http://easylist-msie.adblockplus.org/chinalist+easylist.tpl','ChinaList+EasyList')"Ch...

xp隐藏右下角图标设置

标签：电脑入门

方法步骤在任务栏空白处右键--属性，打开任务栏和[开始]菜单属性窗口。点击自定义按钮，打开自定义通知。在自定义通知中选择你要隐藏的图标，在行为一栏设置为总是隐藏，然后点确定。这样图标就默认隐藏了。如果你想查看隐藏的图标，点显示隐藏的图标按钮即可查看。注意事项此方法中的隐藏图标不是彻底隐藏。需...

去掉Win7右下角小白旗图标

标签：电脑入门

一、通过任务栏通知区的自定义功能或者控制面板直接隐藏 1、点击右下角通知区最左面的那个朝上的白色小箭头，再点击自定义...那个文字 2、点击打开或关闭系统图标，在操作中心右边的下拉框那儿点击，下拉菜单里面点击关闭，点击确定即可。二、用组策略来关闭操作中心图标 .Win键+R键打开运行窗口，输入gpedit.msc来打开组策略打开组策略...

静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器

标签： Web开发

请新建文件TestImage.html 注意：静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。欢迎与邀月交流,net技术与软件架构内容如下，(可自行修改)：代码如下： !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xml...

查看更多精彩>>