http://hedgehogking.com/works/yemao/如这个网页里面的那个ul的滚动条。

其他浏览器正常,唯独在IE6,7下,它不能拖,其他的功能还正常。

我简单测试了一下,发现是它的父父父父元素和父父父父父元素(即class=”main_publish”和class=”main_publish_border”)使用到了PIE.htc(看common.css)。

我试过只是删除“PIE”,让它连不了PIE.htc,它就正常可以拖动了。

虽然这个ul可以放到他们外面,不受PIE约束,再用绝对位置定位,但是我想知道还有没有其他办法。求大牛

 

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了。

这些样式规则很简单:

  • scrollbar-arrow-color: color; /*三角箭头的颜色*/
  • scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
  • scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  • scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
  • scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
  • scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
  • scrollbar-track-color: color; /*立体滚动条背景颜色*/
  • scrollbar-base-color:color; /*滚动条的基色*/

大概就这些,你也可以定义cursor来定义滚动条的鼠标手势。

这里,很久以前danger做了个基于Flash的可视化工具,简单但是好用:

选中CSS选项即可自动生成CSS样式,这里不再过多的介绍了。嗯,多谢大猫老湿推荐。

webkit的自定义滚动条样式

yes,这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到,IE只能定义相关部分的color等属性,这样太不灵活了。

webkit最近实现了对滚动条的支持,先看一个简单的demo:

不过,webkit不再是用简单的几个CSS属性,而是一坨的CSS伪元素

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-button 滚动条两端的按钮
  • ::-webkit-scrollbar-track 外层轨道
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-thumb (拖动条?滑块?滚动条里面可以拖动的那个,肿么翻译好呢?)
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式

通过这些伪元素,可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些,还有很多伪类,可以更丰富滚动条样式:

  • :horizontal – horizontal伪类应用于水平方向的滚动条
  • :vertical – vertical伪类应用于竖直方向的滚动条
  • :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如,垂直滚动条的上面,水平滚动条的左边。)
  • :increment – increment伪类和decrement类似,用来指示按钮或内层轨道是否会增大视窗的位置(比如,垂直滚动条的下面和水平滚动条的右边。)
  • :start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
  • :end – 类似于start伪类,标识对象是否放到滑块的后面。
  • :double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说,它表示内层轨道是否紧靠一对按钮。
  • :single-button – 类似于double-button伪类。对按钮来说,它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说,它表示内层轨道是否紧靠一个single-button。
  • :no-button – 用于内层轨道,表示内层轨道是否要滚动到滚动条的终端,比如,滚动条两端没有按钮的时候。
  • :corner-present – 用于所有滚动条轨道,指示滚动条圆角是否显示。
  • :window-inactive – 用于所有的滚动条轨道,指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中,该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)

另外,:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

关于具体的demo,这里不再做了,网上已经有很多demo可以参考,比如,webkit官方的这个,具体的线上项目中也有现成的例子,比如,QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是,webkit的这个伪类和伪元素的实现很强大,虽然类目有些多,但是我们可以把滚动条当成一个页面元素来定义,也差不多可以用上一些高级的CSS3属性,比如渐变、圆角、RGBa等等,当然有些地方也可以用图片,然后图片也可以转换成Base64,总之,可以尽情发挥了。

PS:中间部分术语翻译不到位,欢迎斧正。

转自:http://www.qianduan.net/css-custom-scroll-bar-style.html/comment-page-2#comments 前端观察

参考文章:

 

刚才在写页面的时候,用到了PIE,发现了在IE6,7里面,使用圆角和阴影时 margin-top会没有效果。

以为是什么冲突,然后独立出来测试,还是一样,margin的其他方向都可以,只是top不起作用

试了一下,发现有三个方法可以解决:

第一:用position调位;

第二:不用PIE,改用ie-css3,margin-top和圆角的效果出来了,但是阴影效果没出来(不知道什么问题);

第三:使元素浮动。

根据实际情况采取合适的解决办法吧

 

 

 

今天写js 的漂浮广告时发现js跟DOCTYPE冲突了,然后查了一下,是document.body.scrollTop跟DOCTYPE的冲突。

冲突原因:

经过查询,发现,有了DTD声明之后,document.body.scrollTop 的值就会总是等于0,解决办法就是在有 DTD 时用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以正常使用了。

总结:

  • 页面具有 DTD(或指定了 DOCTYPE)时,使用 document.documentElement。
  • 页面不具有 DTD(或没有指定了 DOCTYPE)时,使用 document.body。
  • 在 IE 和 Firefox 中均是如此。
  • 为了兼容(不管有没有 DTD),可以使用如下代码:
var scrollTop = window.pageYOffset|| document.documentElement.scrollTop|| document.body.scrollTop|| 0;

参考:    http://digdeeply.info/archives/1216279.html

 

很多朋友都可能会遇到一种情况,就是js的漂浮广告单独时能运行,嵌到页面里时却动不了。

今天试了很久,又翻查了代码,还是不懂,随后还是用了jQuery。

后来用排除法查出了问题的所在,是js部分代码跟DOCTYPE冲突了。

开始不知道到底哪里冲突,平时都用到的属性、方法,为什么这下就不行了呢?

后来到网上查,是document.body.scrollTop跟DOCTYPE冲突了,我们可以用document.documentElement.scrollTop来代替,而且千万别忘了,为了兼容各个浏览器,left top 那些值是要加单位的

冲突原因:http://hedgehogking.com/?p=286

 

参考:http://www.jnyl.net/knowledge/324.html

 

mouseout有一个很让人头痛的特点,就是当一个元素触发mouseout时,它识别的不仅仅是该元素的mouseout,而且该元素的任何子元素都会起作用。

所以当我们做成导航的下拉时,mouseover没问题,但当鼠标向下移,一到达下拉的菜单时,mouseout就会被触发,最终的效果跟我们想要的不一样。

为了解决这个问题,我们引入以下例子

<h3>默认</h3>
<div id="d" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg" style="color:blue;"></p>
<hr>
<h3>解决</h3>
<div id="d1" style=" width:100px; height:100px; line-height:100px; border:1px #000 solid; text-align:center">
<a href="http://bbs.51js.com" target="_blank">51js</a>
</div>
<p id="msg1" style="color:red;"></p>
<script type="text/javascript">
document.getElementById("d").onmouseout=function(e){
 document.getElementById("msg").innerHTML+="out ";
};
document.getElementById("d1").onmouseout=function(e){
 var e = window.event || e, relatedTarget = e.toElement || e.relatedTarget;
 while(relatedTarget && relatedTarget != this){
 relatedTarget = relatedTarget.parentNode;
 if(!relatedTarget){
 document.getElementById("msg1").innerHTML+="out ";
 }
 }
};
</script>

		
 

这四个都是event属性,e.srcElement   e.toElement   e.fromElement   e.relatedTarget

toElement可以理解为鼠标移动到这个元素,也可以说是鼠标去往那个元素。

fromElement可以理解为鼠标从这个元素移走,也可以说是鼠标来自那个元素。

当要获取产生事件的对象本身时,mouseover时用toElement,mouseout时用fromElement。

srcElememt表示产生事件的元素。即无论是mouseover还是mouseout,获取的都是对象本身。正如上一行所说的,它表示为mouseover时的toElement,mouseout时的fromElement。

relatedTarget返回鼠标从哪个元素来,或者到哪个元素去。在mouseover事件中,它表示鼠标来自哪个元素,在mouseout事件中,它指向鼠标去往的那个元素。某种程度上可以说是srcElement的反向。

但重点是:IE只支持带有element的,Chrome等只支持带有target的

所以我们需要兼容……

 

 

之前说到CSS Expression,然后网上查了一查,发现这是属于CSS中的行为。

众所周知,网页三要素就是结构,表现,行为,也就是说HTML是结构,CSS是表现,JavaScript是行为。

这里所说的CSS中的行为,就是说,在CSS里面使用JavaScript语言。

CSS Expression和Behavior属于CSS中的行为,也就是说,通过这两种方法,我们可以在CSS里面使用JS语言。

其中Expression的用法可以看这里 ,而Behavior的用法大概是这样的:

behavior:url(css/PIE.htc);

而JS语言就写在了htc文件里面。里面大概可以像这个例子changeColor.htc:

<public:attach event="onmouseover" onevent="before()" />
<public:attach event="onmouseout" onevent="after()" />

<script type="text/javascript">
    function before(){
    this.style.backgroundColor="#7FFFAA";
    this.style.color="red";
    this.style.cursor="pointer";
    }
    function after(){
    this.style.backgroundColor="";
    this.style.color="";
    this.style.cursor="";
    }
</script>

然后在CSS文件里面这样用

li{behavior:url(css/changeColor.htc);}

expression和behavior的重要说明

1:只有IE才可以使用

css中的行为,expression和behavior只有IE才有效,FireFox无效,而且IE也只有IE5以上的版本才支持。

2:不推荐使用expression和behavior

在页面渲染的过程中,expression和behavior需要大量的计算,会大量地耗费客户端资源。所以不到迫不得已,请不要使用expression和behavior。

3:expression和behavior的现实意义

上面两点,好像已经判了expression和behavior死刑。其实,并不是,它们依然有着现实意义——就是用另外一种途径解决IE6的兼容性问题(IE5已经基本退出市场,可以不用考虑)。例如:IE7以上的版本、FireFox、Opera、Safari都已经支持透明PNG图片,但是IE6却不能支持。这是IE6天生的缺陷,但是为了能让IE6也能够兼容我们的设计效果,那么这时候behavior便有了用武之地。

总的来说,expression和behavior在逐渐的没落,但是只要IE6还是浏览器市场上占有一席之地,expression和behavior就依然有着旺盛的生命力。

 

在上一篇文章“CSS控制图片自适应”里面提及到CSS 的Expression。

CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性。

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

这里的CSS属性可以是元素固有的属性,也可以是自定义属性。

CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中单独针对IE设置时会比较有用。

从IE5开始支持CSS Expression。我们看下面的代码:

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression,实现隔一个小时切换一次背景颜色。

CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。

如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression,一定要记住它们要计算成千上万次并且可能会对页面的性能产生影响。

 

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

 

一、   对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如:

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

img{
max-width:100px;
max-height:100px;
overflow:hidden;
}

二、对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:

img{
width:expression(this.width>150?"150px":this.width);
height:expression(this.height>150?" 150px":this.height);
}

三、完美解决方案

img{
border:0;
margin:0;
padding:0;
max-width:150px;
width:expression(this.width>150?"150px":this.width);
max-height:150px;
height:expression(this.height>150?" 150px":this.height);
}

转自:http://wendesign.net/blogs330.html

 

© 2012 Hedgehog Suffusion theme by Sayontan Sinha