跨浏览器的CSS固定定位

2016-02-19 23:18 6 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享跨浏览器的CSS固定定位,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

本文介绍了跨浏览器的CSS固定定位,请看下面的例子:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head

style type="text/css"
#fixed{position:fixed;top:5em;right:0;}   /*针对IE7、Opera、Firefox一行搞定*/
/style
/*IE6中利用容器对溢出内容的处理方式来实现的*/
!–[if IE 6]
style type="text/css"
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的,这是设置right:17px的原因*/
/style
![endif]–
!–[if lt IE 6]
style type="text/css"
#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}
/style
![endif]–
/head
body
div id="wrapper"

/div
div id="fixed"h2{position:fixed}/h2/div
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1629605.html

延伸阅读
360安全浏览器跨屏浏览怎么关闭 1、打开360安全浏览器,点击右上角的工具--选项; 2、点击左侧的“实验室”,在右侧取消勾选“显示跨屏浏览按钮”、“在状态栏显示跨屏浏览图标”和“开启自动同步功能”即可。 如何将电脑上的网页同步到手机 1、打开一个网页,点击右上角的跨屏浏览按钮。 2、在弹出的页面...
标签: Web开发
一个在线生成跨浏览器的CSS3代码的网站,很直观,也很方便,现在支持的CSS 3属性有圆角、阴影、渐变、自定义字体、旋转、rgba色彩。即将支持的还有其他的一些 css transform。 用法很简单,点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。 即刻体验: 事实上,现在支持这些CSS3属性的浏...
标签: Web开发
很多时候,希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时,会把连续的空格解析成一个,所以我们会使用   等这样的占位符。 但是   也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。 同时,注意到 Safari 中的   宽度是已设定字符的空格宽度...
标签: Web开发
网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了,因为IE 6.0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是CSS Hack,即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去...
标签: Web开发
我很久以前就开始计划着整理一下CSS选择器的浏览器支持,因为CSS3增加了很多非常有用的选择器。之前我也写过一篇《使用CSS选择器创建个性化链接样式 》,作为对CSS选择器的初步研究。 kimblim网站整理了一份很全面的CSS选择器支持情况,我将其翻译过来并进行进一步的整理,将其尽可能的简化。同时结合evotech网站整理的CSS选择器支持列表,以...

经验教程

661

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部