兼容性總結(jié)

_DangJin 發(fā)布于2019-08-02 15:55 / 2565人閱讀

摘要：寫在前面的話，也不知道還要不要管，暈暈乎乎的兼容性引用在元素浮動(dòng)，如果寬度需要內(nèi)容撐開，就給里邊的塊元素都加浮動(dòng)例左側(cè)右側(cè)給它設(shè)置顯示如下解決辦法在下元素要通過(guò)浮動(dòng)并在同一行，就給這行元素都加浮動(dòng)例樣式結(jié)果解決都浮動(dòng)注意標(biāo)簽嵌套規(guī)范例

寫在前面的話，也不知道還要不要管ie6、7，暈暈乎乎的

1、h5兼容性

引用html5shiv.js

2、

 1. 在IE6元素浮動(dòng)，如果寬度需要內(nèi)容撐開，就給里邊的塊元素都加浮動(dòng)

例：


    
        左側(cè)
    
    
        右側(cè)

給它設(shè)置css

.box{ width:200px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}
h3{margin:0;height:30px;}

顯示如下：

解決辦法：

h3{margin:0;height:30px; float:left;}

-2   在IE6下元素要通過(guò)浮動(dòng)并在同一行，就給這行元素都加浮動(dòng)

例：

樣式

    .left{width:100px;height:100px;background:red; float:left;}
.right{width:200px;height:100px;background:blue;margin-left:100px;}

結(jié)果：

解決：都浮動(dòng)

3- 注意標(biāo)簽嵌套規(guī)范

例

樣式

結(jié)果

- IE6下最小高度問(wèn)題

在IE6下元素的高度的小于19px的時(shí)候，會(huì)被當(dāng)做19px來(lái)處理
解決辦法:`overflow:hidden;`

- 4在IE6下父級(jí)有邊框的時(shí)候，子元素的margin值消失

例

樣式

結(jié)果

解決

在IE6下解決margin傳遞要觸發(fā)haslayout

.box{background:blue;border:1px solid #000;zoom:1;}

5、css hack

針對(duì)不同的瀏覽器寫不同的CSS 樣式的過(guò)程，就叫CSS hack!

‘ 9 ’ 所有的IE9及之前 
‘ + ’ 和 ‘ * ’ IE7及ie7的ie瀏覽器認(rèn)識(shí)
‘ _IE6 ’及ie6的ie瀏覽器認(rèn)識(shí)

例：

.box{ width:100px;height:100px;background:red;background:blue9;      
      +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

6、html條件注釋語(yǔ)句





無(wú)標(biāo)題文檔

GPU云服務(wù)器云服務(wù)器年終總結(jié) 網(wǎng)絡(luò)總結(jié) 方法總結(jié) 函數(shù)總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54344.html

相關(guān)文章

css居中總結(jié)

摘要：前言一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒(méi)有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過(guò)的或積累的居中方法給總結(jié)一下。又必須有個(gè)父級(jí)對(duì)其進(jìn)行設(shè)置居中。前言一直有個(gè)想法要把各種居中的方法總結(jié)一下，但還是一直沒(méi)有時(shí)間去整理。最近剛好在做樣式重構(gòu)的項(xiàng)目，順便把一下自己有用過(guò)的或積累的居中方法給總結(jié)一下。水平居中行內(nèi)元素水平居中行內(nèi)元素的居中比較簡(jiǎn)單，直...

gxyz 2019-08-30 15:55 評(píng)論0 收藏0
關(guān)于CSS居中問(wèn)題的一些總結(jié)

摘要：兼容性屬性兼容存在一定問(wèn)題，高版本需要添加前綴父子第四使用通過(guò)父級(jí)元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問(wèn)題父子第六父相對(duì)子絕對(duì)，上下左右居中兼容性及以上父子前端頁(yè)面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實(shí)現(xiàn) 第一常用text-align:center先將子元素將...

Riddler 2019-08-30 14:14 評(píng)論0 收藏0
關(guān)于CSS居中問(wèn)題的一些總結(jié)

摘要：兼容性屬性兼容存在一定問(wèn)題，高版本需要添加前綴父子第四使用通過(guò)父級(jí)元素布局將子框轉(zhuǎn)換為再設(shè)置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結(jié)合兼容性屬性兼容性問(wèn)題父子第六父相對(duì)子絕對(duì)，上下左右居中兼容性及以上父子前端頁(yè)面開發(fā)中關(guān)于內(nèi)容居中的需求應(yīng)用概率很大，自己搜集一些資料和總結(jié)關(guān)于css里的幾種居中效果實(shí)現(xiàn) 第一常用text-align:center先將子元素將...

ISherry 2019-08-01 18:44 評(píng)論0 收藏0
垂直水平居中的方式總結(jié) +（使用場(chǎng)景）

摘要：內(nèi)容無(wú)法撐開父級(jí)容器表格容器居中使用場(chǎng)景容器內(nèi)容居中，并不想脫離文檔流。缺點(diǎn)不適用于彈層這種蓋住頁(yè)面內(nèi)容的布局使用和垂直居中值等于元素高度的值使用場(chǎng)景一個(gè)容器內(nèi)部的當(dāng)韓文字居中優(yōu)點(diǎn)內(nèi)容寬高，容器寬高均不用。以前前端面試基礎(chǔ)問(wèn)題的時(shí)候經(jīng)常會(huì)被問(wèn)到這個(gè)問(wèn)題：但是從來(lái)沒(méi)有做過(guò)這樣的總結(jié)，網(wǎng)上很多人總結(jié)的很多，很好。自己干了這么多年，這個(gè)問(wèn)題使用場(chǎng)景還是蠻多的，還是自己總結(jié)一下吧（不斷更新）...

YuboonaZhang 2019-08-01 18:01 評(píng)論0 收藏0
垂直水平居中的方式總結(jié) +（使用場(chǎng)景）

摘要：內(nèi)容無(wú)法撐開父級(jí)容器表格容器居中使用場(chǎng)景容器內(nèi)容居中，并不想脫離文檔流。缺點(diǎn)不適用于彈層這種蓋住頁(yè)面內(nèi)容的布局使用和垂直居中值等于元素高度的值使用場(chǎng)景一個(gè)容器內(nèi)部的當(dāng)韓文字居中優(yōu)點(diǎn)內(nèi)容寬高，容器寬高均不用。以前前端面試基礎(chǔ)問(wèn)題的時(shí)候經(jīng)常會(huì)被問(wèn)到這個(gè)問(wèn)題：但是從來(lái)沒(méi)有做過(guò)這樣的總結(jié)，網(wǎng)上很多人總結(jié)的很多，很好。自己干了這么多年，這個(gè)問(wèn)題使用場(chǎng)景還是蠻多的，還是自己總結(jié)一下吧（不斷更新）...

snifes 2019-08-29 13:49 評(píng)論0 收藏0