小夜MM，你CSS比较牛帮忙看下这个。。。

咖啡

怎么解决的？？

mix

品物流形 发表于 2012-7-7 22:59



毫不犹豫地抛弃，这种用户不会给你带来多大价值的。
.......50%的用户。。。。抛弃？？？？？

咖啡

[ol]

不知道您是否留意了，浏览本站时，浏览器右下角有一个标着top的黑色直角三角形，可以点击它返回到正在浏览的网页页眉。当滚动网页时，它的位置一直没有任何改变，您感觉它怎么样？这就是通过CSS的定位属性{position:fixed}来实现的，通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。

IE7、Firefox、Opera，都支持CSS的{position:fixed}，所以很容易实现（《详解定位与定位应用》）

IE6不支持该属性，但是在使用!DOCTYPE 声明指定standards-compliant（标准）模式可以通过CSS hack实现

上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案，但是可以通过IE特有的expression在CSS中实现（移动网页时固定元素会动），这和常见浮动Logo广告利用Javascript实现原理是一样的，只不过可以直接写在CSS中比较简便的

利用IE独有的条件注释语句可以针对不同的IE版本精确设置，同时避免了这些代码被其他浏览器读到，个人认为比纯粹的CSS Hack好，如果你安装了多个IE（包括绿色版本），条件注释将会以最高版本的IE为标准。

实现代码如下：

......

#fixed{position:fixed;top:5em;right:0;......}   针对IE7、Opera、Firefox一行搞定

IE6中利用容器对溢出内容的处理方式来实现的

html{overflow:hidden;}

body{height:100%;overflow:auto;}

#fixed{position:absolute;right:17px;}

fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的，这是设置right:17px的原因

#fixed{position:absolute;top:expression(eval(document.body.scrollTop + 50));}

......

{position:fixed}

代码演示1（单个IE，纯粹通过条件注释区分IE浏览器）

代码演示2（多个IE，通过条件注释+CSS hack区分IE浏览器，明显的比纯粹条件注释复杂且不易读，放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果，下同。）

或许有人像我一样，在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时，喜欢在声明前面加上XML Prolog(如：)，但此时IE7以下都处于Quirks（兼容）模式，所以上述针对IE6的Hack失效，这个时候你可以对IE6也通过expression来实现。

当IE6处于quriks模式时，IE6和IE5.5对CSS解析方式几乎雷同，所以当看到《position:fixed for Internet Explorer》时，我找到了在Quirks模式下IE6/IE5.5/IE5统一的CSS解决方案：

......

body{overflow:hidden;}

#wrapper{height:100%;overflow:auto;}

#fixed{position:absolute;right:17px;}

......

{position:fixed}

代码演示3（单个IE，纯粹通过条件注释区分IE浏览器）

代码演示4（多个IE，通过条件注释+CSS hack区分IE浏览器）

对比两个纯粹的CSS hack发现，两个原理似乎相同，在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上，但是这实际上是一种Hack，基本上不具备通用性，知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度，它的大小都始终充满整个浏览器的可视区域，而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域，更多内容请看《IE 中的 html 元素》

或许有人会想，现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题，这下爽了，但是加上XML Prolog后突然发现IE6处于Quirks模式，以前在standards-compliant模式下的设计又变形了，呵呵，这就是咱们搞IE的下场。[/ol]复制代码
咖啡 发表于 2012-7-7 22:57



唉，你以为我想啊，网站的用户多数用的是IE6核心。。。抛弃他们？？？？？？ ...
毫不犹豫地抛弃，这种用户不会给你带来多大价值的。

qxwo

javaluo 发表于 2012-7-7 21:45



人才啊

geyunbing

品物流形 发表于 2012-7-7 22:55



对IE6彻底无语，还死抱着IE6不放的，我觉得不妨跟IE6一起老死算了。
唉，你以为我想啊，网站的用户多数用的是IE6核心。。。抛弃他们？？？？？？

誓誓

对IE6彻底无语，还死抱着IE6不放的，我觉得不妨跟IE6一起老死算了。

huyez

vip1 发表于 2012-7-7 21:54



人才啊
我是复制的。。。

咖啡

呵呵，你这个我看过了。。原先一直没搞出来。
后来查了下hack总算是搞出来了。。

javaluo品物流形

咖啡 发表于 2012-7-7 23:02



.......50%的用户。。。。抛弃？？？？？
20/80原则在哪里都是适用的。
50%用IE6的这部分人，是在那80%只能带来20%收益的群体内的。
自己想吧，成本/收益，边际成本/边际收益，值不值得？

根据你这个站点的月收入自己算。

vip1

品物流形 发表于 2012-7-7 23:35



20/80原则在哪里都是适用的。
50%用IE6的这部分人，是在那80%只能带来20%收益的群体内的。
自己想吧，成 ...
。。。我站点的月收入，一般是这些人提供的