兼容性總結(jié)

CoXie 發(fā)布于2019-08-30 13:04 / 1714人閱讀

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

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

1、h5兼容性

引用html5shiv.js

2、

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

例：


    
        左側(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下元素要通過浮動并在同一行，就給這行元素都加浮動

例：

樣式

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

結(jié)果：

解決：都浮動

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

例

樣式

結(jié)果

- IE6下最小高度問題

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

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

例

樣式

結(jié)果

解決

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

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

5、css hack

針對不同的瀏覽器寫不同的CSS 樣式的過程，就叫CSS hack!

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

例：

.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條件注釋語句





無標(biāo)題文檔

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115281.html

相關(guān)文章

css居中總結(jié)

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

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

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

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

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

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

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

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

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

snifes 2019-08-29 13:49 評論0 收藏0