CSS教程之IE7和FF扫瞄器中右下角图片告白

显示全部楼层 · 发表于 2015-1-15 23:55:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
网页制造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;}

演示页面：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><styletype="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>FixedlayerinMSIE.position:fixed;poluoluo.com</title></head><body><div><div><h1>FixedlayerinMSIE</h1><p>ThisisasimulationofCSS"position:fixed"forMSIE.Themaintextonthispageiscontainedina100%high,scrollable<div>.Thescrollbarbelongstothe<div>,nottothe<body>.Theordinary<body>contentisfoundinthefixedgreenbox.AllHTMLandCSSonthispageshouldfollowtheW3Cspecexceptoverflow-y:hidden,whichisusedforcosmeticalpurposesinearlierIEversions.</p><h2>Browsersupport</h2><p>ThebrowserslistedbelowarethoseIhavetestedinsofar.Idontknowhowotherbrowserswillbehave.Becauseofthe<strong>problemsinOpera7.10</strong>IrecommendusingConditionalComments(section3,exampleA),whichhidesCSSfromallbrowsersexceptMSIE5+.OtherbrowserslikeMozillaandOperamayuseCSSposition:fixedinstead(thatshowIvedoneitonthispage).</p><p>NotethatifyouhidepartsoftheCSSfromnon-MSIEbrowsers(likeonthispage)thedetailsaboutnon-MSIEbrowsersbelowdonotapply.</p><h3>Supportingbrowsers</h3><ul><li>MSIE4.72/win</li><li>MSIE5.0/win</li><li>MSIE6.0</li><li>Netscape6.1+</li><li>Mozilla</li><li>Opera7.0</li><li>Opera7.11(<strong>not7.10</strong>)</li></ul><h3>Non-supportingbrowsers</h3><ul><li>Netscape4.x(degradesgracefully)</li><li>MSIE4/mac</li><li>MSIE5/mac(notsureaboutthedetails)</li><li>Opera6.0(degradesgracefully)</li><li><strong>Opera7.10(freezes)</strong></li></ul><h3>Generalproblems</h3><ul><li>InIE5andIE6/quirkmodedoublescrollbarswillappearunlessoneaddsthenon-standardCSSoverflow-y:hiddenproperty.</li><li>Contentmustbecontainedineitherthescrollableorthefixed<div>,notoutsideanyofthem.</li><li>Ifyouapplymarginorpaddingtodiv#fixedcontent,Mozillaaddsthistothe100%heightandwidthwhichresultsindoublescrollbars.BecauseofthatIhavenestedadiv#innerboxandapplythepaddingtothatinstead.ThisdoesnotseemnecessaryforMSIE6.</li><li>ThescrollingcontentmustbeabsolutelypositionedforOpera7.</li><li>Thefixedcontentcanobscureothercontent,andcanitselfeasilybecomeobscuredinsmallbrowserwindows.</li></ul><p></p><h2>position:fixedinIE</h2><p>SincetheprojectIwasworkingonforQ42togetherwithSjoerdhadtowaitalittlewethoughtitwouldbeagoodideatoupdatethesiteoftheir<abbr>WYSIWYG</abbr><abbr>XML</abbr>Editor,Xopus.Therearestillafewminormistakesonthesite(validatingandallthat),butthosedonotmakethesiteinaccessibleorso.Wealsocouldnotuse<abbr>UTF-8</abbr>(learnabout<abbr>UTF-8</abbr>,leerover<abbr>UTF-8</abbr>)becausethecurrenthttpd.conffiledidnotallowspecifyinga.htaccessandmodyfyingtheserverconfigurationfilewasnotconsideredtobeagoodidea(andnobodywhowasaroundwassureifwewerejustallowedtoreadit,orifwecouldoverwriteaswell)justbeforetheweekend.Iguessthosethingswillbefixedeventually.(Obviously,thesameistrueforputtingmod_negotationtowork.)</p><p>Anyway,thecoolthingoftheoriginalsitewasthefixedtopandbottom.Itwasdonewithsomescriptingthatdidnotworkcrossbrowser.InMozillayoucouldnotscrollandinSafarithecontentwasnotshown.AlthoughXopusisaproductjustforInternetExplorerthankstonotsupportingof(forexample)contentEditable="true"inothersthewebsitecouldatleastbemadeaccessiblesopeopleusingotherbrowserthenInternetExplorercouldcheckwhattheproductisabout.</p><p>However,emulatingposition:fixedwasrathertricky.IfirstthoughtofusingsomefixedpositioningtechniqueIdevelopedagesago,butdidnotquiteemulatetheintentedeffect.(InInternetExploreritlookslikeyouareusingframes,whichisnotwhatwewanted.)Therearesomeexamplesontheinternetbutmostmadethefixedelement"flicker".Youcanseethathere.Ofcourse,youwantbetter;position:fixedinIE.AlthoughthereareworkaroundsforInternetExplorer6.0instandardsmode,justusequirks.Itissomucheasier,especiallyifyouhavetocopewithInternetExplorer5.5(andeven5.0)aswell.</p><p>Thedifferencebetweenthetwofilesisbackground:url(foo)fixed.Althoughtheexistenceofthefilefooisnotreallyneeded,makesurefooissomezerobytefiletopreventstupid404requests.Youmightthinkthereferencetofooisnotneededatallandyoucanjustwritebackground-attachment:fixed.Unfortunately,thatisincorrect.InternetExplorerprobablyrunsabitdifferentwhenthissettingisset.</p><p>Allotherthingsareprettyclear,Ihope.Havefun.</p><p></p></div></div><divid="test"><imgsrc="/files/090701/1_080301.jpg"/></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
需要元素：
DOCTYPE声明、html标签、body标签、一个ID为test的div。

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？

		自动登录	找回密码
密码			立即注册

[DIV+CSS] CSS教程之IE7和FF扫瞄器中右下角图片告白

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

浏览过的版块