FF下zoom的替代方案 單位em

2021-04-15 16:13:01 字數 2259 閱讀 4300

css 屬性zoom是ie私有屬性 在ff中(或者說僅實現css標準的其他瀏覽器中)無法使用,一直在網上搜尋它的替代方案,但沒有收穫,後來聽群裡有朋友說em或可解決此問題,經過研究和測試,發現果然可以解決。

首先是em的計算方式,當本元素和父級元素沒有指定以em或者百分比為單位的font-size時,1em嚴格等於16px,當本元素和父級元素指定了以em或者百分比為單位的font-size時,則在16px的基礎上乘以所有上級fontsize的積。

如 doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

>css單位em

title

>

<

style 

type

="text/css"

>

span

.domain

style

>

head

>

<

body

>

<

span

>

正常的1em=16px

span

>

<

div 

style

="display:inline-block;width:1em;height:1em;background:green;"

>

div>

<

div 

class

="domain"

style

="font-size:2em;border:solid 1px red;"

>

<

span

>

style="font-size:2em;border:solid 1px red;"

<

br/>

這裡1em=2x16=32px

span

>

<

div 

style

="display:inline-block;width:1em;height:1em;background:green;"

>

div>

<

div  

class

="domain"

style

="font-size:3em;border:solid 1px blue;"

>

<

span

>

style="font-size:3em;border:solid 1px blue;"

<

br/>

這裡1em=2x3x16=96px

span

>

<

div 

style

="display:inline-block;width:1em;height:1em;background:green;"

>

div>

<

br/>

<

div  

class

="domain"

style

="font-size:50%;border:solid 1px black;"

>

<

span

>

style="font-size:50%;border:solid 1px black;"

<

br/>

這裡1em=2x3x50%x16=48px

span

>

<

div 

style

="display:inline-block;width:1em;height:1em;background:green;"

>

div>

<

br/>

div>

div>

div>

body

>

html

>

由這個性質 可以通過設定line-height來代替zoom以達到想要的效果

JSX的替代方案(譯文)

jsx作為一種流行的模板語言,在各種框架都得到了廣泛的應用。但是,如果您不喜歡它,或者您想在某個專案中使用其他的方案,或者只是想知道如何在沒有它的情況下編寫react 最簡單的答案是閱讀官方文件,不過它有點過於精簡了。什麼是jsx?首先,我們需要知道jsx是什麼,以便知道其翻譯為純js是什麼樣的。j...

MySQL遞迴的替代方案

類似查出某個機構下所有的子機構,可用遞迴的方式實現。但mysql不支援遞迴,可以考慮用如下的方式來實現遞迴呼叫。第一種,臨時表方式,使用函式每次查出子機構,再可以和其他表聯查。第二種,新建一張表,列舉出機構和子機構的關係,適合於機構數量不多的情況。第三種,較為通用的情況。使用hierarchy,例如...

PyCharm expired時的替代方案

1.如果是想要繼續申請學生優惠,移步下面鏈結 49條訊息 jetbrain系列軟體的學生授權認證及認證到期重新申請授權 codingrae的部落格 csdn部落格 jetbrains學生認證失效 2.如果能夠接受替代方案,那麼就看下去吧 1 提交學生優惠申請 如果不是學生自動忽略 等待的同時看看下面...