在Q群上看到這張圖,很不錯。圖解什麽是HTML5,它有哪些特性,基本上沒有講到太多專業性的東西,再加上是圖解,對於一般用戶來說比較容易明白。
Category: web前端
設計稿→頁面重構(製作)
轉一篇譯文《IE6 终极备忘:修复IE6下 25+ Bugs》
原文:Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
翻译:http://www.vfresh.org/w3c/727(译文对原文进行了补充)
对IE6最好的策略就是不去兼容它。
好吧,我知道你的难处,你不得不去兼容IE6这个狗血的浏览器,因此不得不在兼容IE6上花费很多时间。对此,我颇有同感,来让我来帮助你吧。
我不会象许多文章那样让你去抵制IE6,这并不会帮助到你(迫不得已时)去兼容IE6;因为IE6依旧占有一定的市场份额,你无法放弃IE6。本文将帮助你来解决这个难题。
我查阅过很多资料来摘录这些解决方案(有些是我自己提供的),现在我做成手册提供给大家搞定IE6这个家伙。我尽可能的提供了最优解决方案而不是一些hacks,并且提供了一些相关的资料。如果你发现有更好的方法或者本文有错误,请联系我。
瀏覧器寛度和高度
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
IE6下,設置邊綫會影响到其它元素的内容被“剪”掉?
在調試頁面的時候,發現一個怪現象,和 hasLayout導至使用了負邊距的元素,邊緣會被裁剪 的情況相似,本質上應是相同的,不過表現略有不同,產生影响的不是邊距(margin),而是邊綫(border)。
在IE6下,父元素包含一個子元素,這時為父元素設置border屬性就會影响到 它的下一個元素,使該元素的内容產生偏移,看似邊緣被“剪”掉?!IE6 demo1
HTML:
<div class="line1"><div>文字文字文字文字文字文字文字</div></div> <div class="line2">邊緣的地方不見了</div>
CSS:
.line1{padding:1px; border-left:4px solid #000;} .line2{border:1px solid red; }
經測試,boder值的大小就是偏移值的大小(可通過修改 border-left:4px 來測試)。而4條邊綫當中,設置上/下邊不會影响到一下個元素,但設置左/右邊就會造成影响:IE6 demo2
上面兩種情況都是普通的文本,如果換了别的呢?接著測試,我把受影响的文本換成超鏈接<a>,情況就變得有趣了。默認情況下,A鏈接仍舊偏移,當鼠標經過的時候,它就被“移”出來了。IE6 demo3
繼續測試,發現受影的不只是一個元素,是下邊幾個元素都會如此,不過,鼠标經過之後能夠被“移”出來的,就只有對上的一行內容。IE6 demo4
至此,或許還有其它情況出現,但我就沒有再測試了。上面說,問題的本質應是一樣的。為什麼說是“應該”?因為解決這個問題的方法除了為 .line1 觸發layout之外,還有一個方法,就是設4條邊。設邊綫(border)是不能觸發的layout的,可設了之後的確有效果,就是說,不用觸發layout也能解決該問題的。IE6 demo5
用JS判斷瀏覽器類型從而使用不同的class
在《Goodbye to CSS Hack》中提到用注釋符來區分瀏覽器,這樣就可以使用不同的class。網上也有一些用來JS判斷的,如文章提到到Ext。在評論中,有人共享了一個實現這種功能的JS,代碼也不多。呵呵謝謝了,我也轉過來分享一下:DEMO