首頁 web前端 html教學 浅谈浏览器兼容性问题-(2)本人解决方案理解与积累_html/css_WEB-ITnose

浅谈浏览器兼容性问题-(2)本人解决方案理解与积累_html/css_WEB-ITnose

Jun 24, 2016 pm 12:07 PM

#浅谈浏览器兼容性问题-(2)本人解决方案理解与积累##前言 接着[前一篇](http://www.cnblogs.com/p2227/p/3593087.html)吧,我们除了正确看待,还要有一定的解决方案积累。当然,IE没有公开的源代码,所以有很多内容只能是记录,在使用中熟记于心并提前避免。##【HTML/CSS】名(chou)扬(ming)天(yuan)下(bo)的IE6双倍边距问题###思考网上有很多关于该问题的文章,园子里面也有很多,[戳我](http://www.cnblogs.com/YAOXI/articles/1691265.html)。这些大多是从“已知问题”的角度去解决,但我们的浏览器不会在发现问题的时候alert一个框告诉你:出现IE6双倍边距BUG啦!正向面对问题时,我们只有现象,出现这个BUG很常见的现象是,**在其他浏览器中排版很好的界面,在IE6中有元素被挤下去了**。如果出现这个问题,则要考虑这个BUG了,当然,能提前避免会更加好。###解决方案(简略)* `display:inline;`* `_margin:一半的边距;`##【HTML/CSS】IE6PNG透明问题###思考* gif也有透明功能,但只能不透明或者全透明,不能提供基于alpha值的半透明解决方案,而png则能处理,但可恨的IE6并不直接支持png透明。* 之前有提及到微软有独家的滤镜功能,这里面有相关的解决方案###解决方案利用`AlphaImageLoader`滤镜,先针对其他浏览器正常载入背景,再针对IE6重设背景,相关CSS如下```.pngTransofrm{background:url(../images/index2q/bg_title.png) no-repeat; _background:none;/*解决IE6PNG不能透明的问题 */_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/index2q/bg_title.png"); /*解决IE6PNG不能透明的问题,注意要相对于HTML文件的png文件的位置 */}```[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/IE6PNG/)###延伸* 此方案只针对背景。按照语义化HTML的思考,如果图片只是烘托,那应该用背景,如果该文章想表达的主题就是图片(比如相册)那么应该用img* 必须针对每一张图片写,滤镜中的路径要相对于HTML文件* 更多解决方案:[戳我](http://www.w3cfuns.com/thread-297-1-1.html)##【HTML/CSS】title属性的行为问题###问题及解决方案这里引用自己当年的一篇文章http://blog.csdn.net/p2227/article/details/7587641只检测到IE8下问题比较严重,由于代码是直接从IE8的F12中拷贝的,所以会有点不太规范。###延伸这是一个很细节的问题,但是前端就是要抓细节,抓用户体验。## 【HTML/CSS】文字描边(filter VS CSS3)###思考很多CSS3中新增的属性,在IE678时代都可以用滤镜去处理,以描边`text-shadow`为例,我们可以用`glow`滤镜去处理###解决方案[戳我](http://gh.p2227.com/demo/BrowserCompatibility/glow/)##【javascript】逗号处理问题###思考在IE678下,数组或JSON的最后一个逗号会被解释成undefined,其他浏览器会按W3C标准忽略。###解决方案本人之前的[优化方案](http://www.cnblogs.com/p2227/p/3541162.html)中有提及,利用正则表达式`,\s*[\r\n][\r\n]\s*\} `在项目源文件中搜索相关代码[DEMO](http://gh.p2227.com/demo/BrowserCompatibility/JSONComma/)## 【javascript】location跳转与return false ###问题及解决方案在IE6中,`
登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

< datalist>的目的是什麼。 元素? < datalist>的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什麼。 元素?

我如何使用html5< time> 元素以語義表示日期和時間? 我如何使用html5< time> 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

我如何使用html5< time> 元素以語義表示日期和時間?

> gt;的目的是什麼 元素? > gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

> gt;的目的是什麼 元素?

< meter>的目的是什麼。 元素? < meter>的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什麼。 元素?

See all articles