IE 规范了就要出事

IE6 加规范后,float:right 和 float:left 再加 position:absolute 的话,position:absolute 的那个 div 就没有了。

当然了,不规范是没有问题的,IE就是不规范的。

神奇的 IE !

IE 的 overflow:auto 在声明规范后有 BUG

IE 在声明规范后,div 的 overflow:auto 就会出错,把 div 定义 position:relative 就好了。

IE 在声明规范后都有毛病,比如滚动条的高度就要用 document.documentElement.scrollTop ,而不是 document.body.scrollTop 。所以求滚动条高度的标准写法是 var st = (document.documentElement.scrollTop || document.body.scrollTop) 。

DOCTYPE的常用声明:按照 HTML 4.01 XHTML 1.0 XHTML 1.1 列表如下,错误的DOCTYPE HTML PUBLIC反而会导致页面解析错误。

HTML 4.01规范分为:Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML 1.0规范分为:Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

XHTML 1.1 DTD
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Firefox3.5与 HTML5和 CSS3

Firefox3.5发布了,那么对于我们前端开发人员来说,有哪些影响呢?

1、HTML

audio和vidio等HTML5标签的支持。

audio的HTML代码可以是这样的:

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"  autoplay>  
您的浏览器尚不支持audio标签。 
</audio>

查看更多关于audio的信息。

Video可以这样写:

<video src="videofile.ogg" autoplay>  
您的浏览器尚不支持video标签。
</video>

查看更多关于video的信息。

另外,Firefox 3.5还将支持其它的一些HTML5特性,比如,离线资源和拖拽。

2、CSS

Firefox 3.5对CSS的支持改进比较多,主要是支持更多的CSS3特性,我简单的列表如下:

  1. @font-face支持,该规则支持CSS3网络字体。
  2. opacity支持升级,抛弃-moz-opacity私有属性,完整支持CSS的 opacity属性。
  3. :before 和 :after伪类更新的CSS 2.1水平,支持position、float、list-style-*、和一些display等属性。
  4. text-shadow支持。text-shadow是一个CSS3属性,即文字阴影。目前,只有Chrome、safari和Opera浏览器支持CSS3的文字阴影。
  5. word-wrap。这是对Firefox来说一个新增的CSS属性,目前IE系浏览器支持该属性。这可以解决字符串过长时的bug,相信很多网页设计师都遇到过。
  6. transforms,transforms属性目前只有webkit核心浏览器支持,包括safari和chrome,Firefox3.5也将支持该属性,它可以将一个元素按照设定的比例变换,必去旋转或缩放,详情请查看 -moz-transform和-moz-transform-origin。

Firefox还支持其它的一些新特性,比如一些伪类等,用的不是太多,这里就不介绍了,感兴趣的话可以到firefox开发者网站去查看。不过前端观察会继续跟进firefox新版本的进展。

从中我们可以看到,目前对CSS3和HTML5的支持最好的是webkit核心浏览器,safari支持的最棒,chrome2.0beta的支持也在不断改进。而firefox在下一个版本中也将有很大的进步。唯一不足的是IE系浏览器,依然跟在各个浏览器的后面。

参考:http://www.qianduan.net/firefox-3-5-new-features.html

obj.style.backgroundColor为什么取不到值?

obj.style.backgroundColor只能赋值,不能取值,取值要用getComputedStyle或者currentStyle。看下例函数:

function getRealStyle(id, styleName){
var element = document.getElementById(id);
var realStyle = null;
if(element.currentStyle){
realStyle = element.currentStyle[styleName];
}else if(window.getComputedStyle){
realStyle = window.getComputedStyle(element, null)[styleName];
}
return realStyle;
}

Yesterday evening

Yesterday evening, before hitting the asphalt back home, I visited the AH store beneath the parking-lot, where these two young people, armed with a video-camera and blossoming smiles, tried to capture passers-by.
Normally I would prefer having my head chopped off before … errr … .
She didn’t have any pigtails, but … well … you know, there was a welcoming sight – countenance and appearance!
She did have that kind of ‘Lonneke Engel’ pinnule and posture. Not at all that perfect, so perchance even more graceful!

Reflecting on the subject I told them I really wasn’t the man they wanted. They acceded this truth quickly enough but we kept chatting for a while – both guy and girl very relaxed, noticeably enjoying their little project.

They probably have wiped this Ugly Faustus Face already, for all that