博客 - 标签：兼容

Chrome对CSS各属性的支持

2008-09-16 下午 - html/css/xml/xsl - -

　　Chrome，对于做前端开发的伙计们来说应该不陌生。前阵子谷歌推出的浏览器。本人在推出当天就下载试用了，但不到10分钟就又卸载了。没什原因，用惯遨游，够了！等全球很多用户都使用Chrome的时候，我再用它也不迟。到了那时不用都不行了，被“逼”的，就好像火狐“逼”着很多人一样。其实不能这样说，毕竟那么多的用户在使用它，说明它还是好的，就安全性而言，应该算高级别了！

　　回到正题，又扯远了！Chrome对于CSS，可以说跟SAFARI不相上下。对于CSS所有的高级属性它都能很好的支持！这点很让人惊喜哦~~！

　　更详细，请看： http://www.evotech.net/blog/2008/09/google-chrome-browser-css-selector-support/

No Comments »

ie6玩转position:fixed(实现固定定位)

2008-07-4 下午 - html/css/xml/xsl - - -

　　原理：出去网页以及原有的滚动条，用一个[div]模拟它。然后将要固定定位的区块置于这个模拟层之外，即可实现需要的效果。因为这时滚动条拖动的只是模拟的那个层，而固定定位的这个层根本就不在这个区块内，所以就不会跟随滚动条而动。

　　利用CSS控制行的属性：

下载: code1.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <style type="text/css"> 
  3. html,body { margin:0; padding:0; overflow:hidden;height:100%; width:100%; text-align:left;}
  4. .body { position:relative; width:100%; height:100%; overflow-y:scroll; overflow-x:auto; cursor:default;}
  5. .box {  position:absolute; z-index:999; margin:0 auto; bottom:10px; left:40px; width:800px; height:40px; border:1px solid #369; background:#f7f7f7; line-height:40px;}
  6. </style> 
  7. <div class="box">我是不会被你拖着走的！</div> 
  8. <div class="body"> 
  9.  <p style="margin:15px;">看屏幕底端的区块，再拖动浏览器的滚动条，结果怎么样？满意吧，惊喜吧！</p> 
  10.  <div style="height:1000px;"></div> 
  11. </div>

　　如果不明白，就自己再多想想吧！

　　还有种方法就是利用js来实现了。在此也顺便贴出来吧！

下载: code2.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. .floatBar { width:100%; position:fixed; bottom:0!important;height:31px; background:#f7f7f7; border:1px solid #369;}
  3. .floatBar {
  4. _position:absolute;
  5. _top:expression(eval(document.compatMode &&
  6.         document.compatMode=='CSS1Compat') ?
  7.         documentElement.scrollTop
  8.         +(documentElement.clientHeight-this.clientHeight) - 100
  9.         : document.body.scrollTop
  10.         +(document.body.clientHeight-this.clientHeight) - 100);
  11. }
  12.  
  13. <div style="height:800px;">下面的层是不随滚动条而动的。</div>
  14. <div class="floatBar">
  15. 这个是利用js实现的固定定位。
  16. </div>

　　两个方法都不错哦！值得推荐的！

1 Comment »

Page 2 of 212