CSS中不為人知Zoom屬性的使用介紹(IE瀏覽器不得不說的坑)
標準瀏覽器有個屬性 scale可以縮放節點 並且可以設定縮放的中心點，我為什麼要說這個呢，因為這個是促使我找回IE css屬性ZOOM的一個助力。
ZOOM現在主要用來解決IE清除浮動，其最初的作用是用來縮放節點，後來也成為標準瀏覽器的一個屬性，但是標準瀏覽器下的zoom效果與原來IE的zoom有很大的區別，這也是“誤導”我使用ZOOM來做IE8縮放的原由
A:先看下標準瀏覽器下的zoom使用：
效果【紅色線條為標尺線】:
寬1024px圖片完好的被縮放了一半 並通過浮動在一行裡面了剛剛好再紅色標尺之內，這效果和css3屬性scale又得一拼，
但是火狐不支援這個屬性，所以別妄想了在標準瀏覽器使用它 法克！！
B.接下來嗎，看下ZOOM在IE8的表現,程式碼如上:
可以看到圖片別縮放了一半，可是空白的地方是什麼鬼？？？？！！！！！！！！！
蛋疼~~~~~~~~~~
但是需求大過天，在IE8還大行其道的時候，開發人員可以說No麼？呵呵
如果是單個節點 例如一張圖片還是能解決大部分需求的:
position:absolute;
right:-204.8px; //1024px* 0.2（A）
zoom:0.8;
把節點往回拉就可以解決right:0;的時候 節點縮放，但是定位沒有改變的求情況
這裡我為什麼強調單個是有原因的，這是個大坑
經過上面的分析，我們理所當然的會這樣考慮:div裡面包含多個節點，我們給div設定zoom和
於是你就這樣做了，但是可是IE不如你所願，下面看下原始碼,可在demo裡面檢視和除錯:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body,div{
height:100%;
height:100%;
}
.a{
zoom:0.5;
width:4036px;
}
img{
float: left;
}
body{
position:relative;
position:absolute;
}
.l{
position:absolute;
background: red;
width:2px;
height:1000px;
left:1024px;
top:0;
}
</style>
</head>
<body>
<div class="a">
<img src="http://7xscbt.com1.z0.glb.clouddn.com/bgWelcome.jpg" alt="">
<img src="http://7xscbt.com1.z0.glb.clouddn.com/bgWelcome.jpg" alt="">
</div>
<div class="l"></div>
</body>
</html>
效果如圖所示:
成功？？！！！！！我們可以看到圖片的確縮小了一半，而且上下左右都沒有間隙，可是為什麼圖片掉下去了，不應該和上 一個demo那樣在同一行的麼？
-------------------------------------------------------------------------------------------》
難道是行內元素間距導致的？我們不是設定了float了麼，不可能出現這個事情
難道是外層div不夠寬？我們沒有設定任何寬度預設是100%頁就是瀏覽器視窗的大小 很明顯現在可以放下3張圖片有餘
我們外層div寬度改為4036px，是原圖大小的2倍，還是不行
----------------------------------見鬼---------------------------------------------------------》
根本找不到原因！！！！唾棄~~~唾棄 ~~不要不要的[email protected]@#@#￥#￥%￥%%……&…………*&
果斷放棄ZOOM 對包含多個節點的節點的操作，那單個節點真的可以用ZOOM來做縮放了麼？來 我們繼續踩坑，看看國內幾大瀏覽器的表現
遨遊:
極速模式和相容模式:
360：
相容模式和IE8一樣
極速模式和谷歌瀏覽器一樣
相關推薦
CSS中不為人知Zoom屬性的使用介紹(IE瀏覽器不得不說的坑)
標準瀏覽器有個屬性 scale可以縮放節點 並且可以設定縮放的中心點，我為什麼要說這個呢，因為這個是促使我找回IE css屬性ZOOM的一個助力。 ZOOM現在主要用來解決IE清除浮動，其最初的作用是用來縮放節點，後來也成為標準瀏覽器的一個屬性，但是標準瀏覽器下的zoom效
CSS中background系列屬性介紹
在CSS中background充當著背景圖的意義，（在CSS3中會有更多的相關屬性），這邊小編介紹一下background系列屬性中不存在相容性問題的一些屬性。之後再學習了CSS3後會在寫部落格進行對該類的補充。 1.background-color 從語義上看就是新增背景顏色 方法一：
關於CSS中的overflow屬性
屬性 pan 用戶 normal style visible 默認值 也會 可見 定義和用法： overflow屬性規定當內容溢出元素框時發生的事情。 這個屬性定義溢出元素內容區的內容會如何處理。如果值為scoll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即
CSS中常用的屬性
沒有 方向 light 之間 pan let -i 附件 circle 字體屬性 Font-family 字體族科 Font-size 字體大小 Font-style 字體樣式 Font-weight 字體加粗 normal |bold(加粗)|lighter(
理解與應用css中的display屬性
寫代碼 塊級元素 get tle 換行符 line attr 沒有 100% display屬性是我們在前端開發中常常使用的一個屬性，其中，最常見的有： none block inline inline-block inherit 下面，我將按照順序將上述幾種屬
css中background-origin屬性的使用
pre type 背景圖 head -s adding 邊框 ott back background-origin用來規定元素背景圖像的相對定位位置，它有三個屬性值： 1、border-box border-box表示元素背景圖像相對於border區域開始定位。 代碼如下：
理解css中的position屬性
理解css中的position 兩種型別的定位 static型別：只有一個值position: static.position預設值 relative型別：包括三個值,這三個值會相互影響，允許你以特定方式移動元素 position: relative position:
CSS中的overflow屬性
導讀：overflow屬性一般用來隱藏超過div範圍的元素，包括不隱藏(visible)，直接隱藏(hidden)，用滾動條隱藏(scroll)，自動(aotu)這四個屬性。當然overflow的用法並不是如此簡單的理解，在很多製作網頁的場合我們都需要用overflow，本文介紹overflow的四
CSS中三種定位介紹
在這段時間對CSS學習中到今天也終於能收個尾了，小編這篇會對CSS中的3種定位做一個詳細介紹 1.相對定位 相對定位：相對於自己原來的位置進行移動。 實際程式碼操作：對於標籤樣式先宣告 position:relative; 再描述移動方向與畫素大小 left帶正數向右移，以此
CSS中提升優先順序屬性!important的用法總結
轉載：https://blog.csdn.net/m0_38099607/article/details/72860779 版權宣告：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/m0_38099607/article
css中的position屬性值的探究
css的position屬性指定了元素的定位型別，然後通過top，botton，left，right來具體定位。 在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。 position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。
CSS中的display屬性
display屬性很有意思這個帶上inline-block可以將原來的塊級元素具有行內元素的特性同時其塊級元素的特性仍然具有。 我們知道<div>是塊級元素總是佈滿一行在這裡我們就讓其具有內聯元素和塊級元素兩種特性方便使用。 display屬性所具有的屬性值 non
關於CSS中 用“rem" 在谷歌瀏覽器下的問題
rem是css3新定義的設定字型大小屬性，常用的兩種字型大小設定有下面2種：1、 px為單位2、em為單位(百分比用法跟em類似) PX為單位 在Web頁面初期製作中，我們都是使用“px”來設定我們的文字，因為他比較精確和固定。只要頁面某元素設定了px字型大小，其子
淺談CSS中margin的屬性及使用方法
想修改一下子自己的CSS，因為部落格標題正好把網頁圖片上的文字正好檔了一部分，看起來很不爽。最後確實是由“margin命令”來控制的，於是上網學習了一下子這個的用法。margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎
CSS中常用的屬性，彙總，練習出一套試卷，簡單版
CSS常用屬性的介紹？顏色屬性可以通過取色器來取色值例子：<!DOCTYPE html> <html> <head> <meta charset="UTF
CSS中常用七大屬性
1 字型屬性 字型屬性的功能是設定頁面字型的顯示樣式 font-family設定使用的字型 font-style設定字型的樣式，是否斜體 font-variant設定字型的大小寫 font-weight設定字型的粗細 font-size設定字型的大小 2 顏色和
專案中彈出頁面的顯示層次問題 CSS中z-index屬性
z-index最大值: IE FireFox Safari的z-index最大值是2147483647 。 Opera的最大值是2147483584.。 IE Safari Opera在超過其最大值時按最大值處理。 FireFox 在超過最大值時會資料溢位正負不定,但有一點可以肯定絕對不會高於2147
CSS中常用的東西在IE中相容問題彙總
1.因為國內360瀏覽器、QQ瀏覽器等更新較快，所以不考慮Chrome支援某個css與否，因為一般都支援。 2.因為火狐等使用的人較少，且更新較快，所以不考慮支援與否，因為一般都支援 3.主要就是彙總css中一些常用的東西，在ie幾個版本的支援情況，如下 ------------------------
CSS中的一些屬性百分比值，相對於誰計算？
在css屬性中，很多屬性的取值可以是百分比，比如：width、height、padding、margin、font-size、line-height、background-position等，那麼這些百分比值的計算是相對於誰呢？ 先來看幾個例子，分別是正常文件流中、浮動情況
CSS進階（20）—— CSS中的裝飾屬性和使用者體驗屬性
本章主要來聊聊CSS中一些雜七雜八的屬性，個人會將裡面的坑提取出來測試一遍加深下印象，比較符合常規的屬性這裡就不贅述了。 1.與眾不同的background-position屬性 background-position屬性支援數值，百分比，關鍵字。