瀏覽器之間不兼容的原因和解決方案網(wǎng)頁設(shè)計(jì)中最大的麻煩之一是網(wǎng)頁與不同瀏覽器的兼容性，這是因?yàn)橹髁鳛g覽器（例如IE 6.0 / IE 7.0 / firefox 2 / Opera 9）無法進(jìn)行CSS解析幾乎相同，從而導(dǎo)致不同的頁面效果. 那么什么方法可以有效解決不同瀏覽器頁面效果不同的問題呢？廣泛使用的方法是CSS Hack，它使用特殊的CSS定義在不同瀏覽器中顯示網(wǎng)頁的設(shè)計(jì)樣式，并為不同的瀏覽器編寫不同的CSS，以最大程度地與瀏覽器兼容. 通常情況下，我會(huì)照顧IE 6.0 / IE 7.0 / firefox 2.0瀏覽器. 技能: 以下是更常用的CSS Hack技術(shù). 最廣泛使用的技術(shù)很重要！它可以針對(duì)IE（IE 7.0可以正確理解！important），并且非IE瀏覽器設(shè)置不同的樣式，只要在非IE瀏覽器樣式之后添加！important，就可以優(yōu)先使用它們. 因此，為了考慮IE 6.0和Firefox之間的差異，我始終使用！important. 1.僅IE7和IE5.0可以識(shí)別* + html select {…}當(dāng)您只需要設(shè)置IE7和IE5.0的樣式時(shí)，可以使用此HACK.

2. 僅IE7可以識(shí)別* + html select {...！important;}當(dāng)只需要為IE7設(shè)置樣式時(shí)，可以使用此HACK. 3. IE6和IE6下的識(shí)別* html select {…}這個(gè)地方應(yīng)該特別注意許多寫為IE6的HACK的博客. 實(shí)際上，IE5.x也可以識(shí)別此HACK. 其他瀏覽器無法識(shí)別. 4. html / ** /> body select {…}此句子與前一個(gè)句子具有相同的作用. 5.只有IE6無法識(shí)別，并且阻止IE6選擇{display / * block IE6 * /: none;}，這主要是通過CSS注釋來分隔屬性和值，注釋在冒號(hào)之前. 6.僅無法識(shí)別IE6和IE5，并且阻止了IE6和IE5. select / ** / {顯示/ * IE6，IE5無法識(shí)別* /: none;}這里的區(qū)別是選擇器和花括號(hào)之間有更多內(nèi)容. CSS注釋. 請(qǐng)勿阻止IE5.5. 7.僅IE5無法識(shí)別，并且阻止IE5 select / * IE5無法識(shí)別* / {…}這句話是前一句話中屬性區(qū)域中的注釋. 只有IE5無法識(shí)別，但I(xiàn)E5.5可以識(shí)別.

8. 盒模型解決方案選擇{width: IE5.x width; voice-family: “ \”} \“”; voice-family: inherit; width: 正確的寬度;}未通過盒模型刪除方法！重要的是，這一點(diǎn)必須清楚. 9.只有Opera可以識(shí)別@ media all和（min-width: 0px）{select {……}}為Opera瀏覽器進(jìn)行單獨(dú)的設(shè)置. 以上都是CSS中的HACK. 這些都是用于解決本地兼容性問題的. 如果要分隔兼容性內(nèi)容，您可以嘗試以下過濾器: 其中一些過濾器是通過CSS編寫的，用于導(dǎo)入特殊樣式的過濾器，有些過濾器是通過條件的HTML編寫的，以鏈接或?qū)�入所需的補(bǔ)丁樣式10. IE5.x過濾器，僅IE5.x是可見的@media tty {i {content: “ \”; / *“” * /}} @ import'ie5win.css'; / *“;}} / * * / 11. IE5 / MAC過濾器，通常不需要/ * \ * // * / @import“ ie5mac.css”； / ** / ---------------- ------------- ------------------------------------- -12. IE的if條件Hack提供了所有可以識(shí)別，只有IE5.0可以識(shí)別IE5.0，而IE5.5可以識(shí)別ze只有IE6可以識(shí)別IE6，低于IE6的IE5.x只能識(shí)別IE7可以識(shí)別------------------------------- ------------------- --------------編寫CSS時(shí)，請(qǐng)將瀏覽器標(biāo)識(shí)符添加到樣式表中. 瀏覽器之間的差異如下: IE可以識(shí)別*，標(biāo)準(zhǔn)瀏覽器（例如FF）不能識(shí)別*； IE6可以識(shí)別*，但不能識(shí)別！ IE7可以識(shí)別*，但是也很重要； FF無法識(shí)別*瀏覽器不兼容問題，但可以識(shí)別！例如，style =“ * width: 10px;！important width: 20px;”因此寬度在IE6下為10px，在IE7下為20px ---------------------------------- ---- --------------------------最新的CSS兼容方案，使您的樣式與主要瀏覽器完全兼容，該方案主要用于解決Safari . 在測(cè)試過程中，Opear順便嘗試了一下. 原來還可以，所以我順便解決了.

.e {/ * FF OP * / background-color: #FF0000} html * .e {/ * Sa IE7 OP * / background-color: #FF00FF} * + html .e {background-color: #000000 ; / * OP * / * background-color: #0000FF; / * IE7 * /} * html .e {/ * IE6 * / background-color: #00FFFF}通過FF2，OP9.21，OP9.10，Sa3. 0.3（pc），IE7，IE6測(cè)試通過，如果您在另一個(gè)與IE6，IE7，F(xiàn)F和其他瀏覽器不兼容的瀏覽器上進(jìn)行測(cè)試的原因和解決方法（轉(zhuǎn)載）本文轉(zhuǎn)載，作者: 阿里巴巴前端開發(fā)，發(fā)只是稍后檢查它，也給需要它的朋友檢查. 瀏覽器不兼容，每個(gè)人都絕對(duì)討厭它. 通常我們只是修復(fù)它，卻忘記了更重要的事情. 那是為了找到根本原因，避免類似的不兼容現(xiàn)象再次出現(xiàn). 在下一節(jié)中，我將總結(jié)一些html編碼元素，并希望提供一些指針: 1.文本本身的大小不兼容. 相同的是font-size: 14px. 不同瀏覽器占用的空間不同. 較低的實(shí)際上是16像素高，即較低的是3像素，較低的實(shí)際上是17像素，較高的是1像素，較低的為左. 白色3px在歌劇下的差異更大.

解決方案: 設(shè)置文本的行高. 確保所有文本均具有默認(rèn)的行高值. 這非常重要，我們不能容忍1像素的高度差. 2.在ff下的容器的高度是有限的，也就是說，在定義容器的高度之后，將確定容器框架的形狀，并且不會(huì)因內(nèi)容物而變大，而在ff之下，它將變大. 內(nèi)容和高度限制無效. 因此，不要輕易定義容器的高度. 3.還要水平討論內(nèi)容破壞容器的問題. 如果未定義浮動(dòng)容器的寬度，則ff下的內(nèi)容將盡可能擴(kuò)大容器的寬度，并且將首先折疊內(nèi)容瀏覽器不兼容問題，即. 因此，需要定義可能被內(nèi)容物破壞的浮動(dòng)容器的寬度. 小型實(shí)驗(yàn): 如果您感興趣，可以看一下這個(gè)實(shí)驗(yàn). 在不同的瀏覽器中測(cè)試以下代碼.

style =” border: 1px純紅色；寬度: 10px”>

本文來自本站，轉(zhuǎn)載請(qǐng)注明本文網(wǎng)址：
http://www.pc-fly.com/a/jisuanjixue/article-287874-1.html