Chrome的CSS變換規模/字體大小的問題

CSSChrome的CSS變換規模/字體大小的問題

.checkbox label:after { 
    content: ''; 
    clear: both; 
    display: table; 
} 

.checkbox .cr { 
    display: table-cell; 
    position: relative; 
    border: 1px solid #a9a9a9; 
    border-radius: .25em; 
    width: 4vw; 
    height: 4vw; 
} 

.checkbox .cr .cr-icon { 
    position: absolute; 
    font-size: 1.5vw; 
    line-height: 0; 
    top: 2vw; 
    left: 1.2vw; 
} 

.checkbox label input[type="checkbox"] { 
    display: none; 
} 

.checkbox label input[type="checkbox"] + .cr > .cr-icon { 
    transform: scale(3) rotateZ(-20deg); 
    opacity: 0; 
    transition: all .3s ease-in; 
} 

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon { 
    transform: scale(2) rotateZ(0deg); 
    opacity: 1; 
}

HTML

<div class="checkbox"> 
    <label> 
     <input type="checkbox" value="" checked> 
     <span class="cr"><i class="cr-icon fa fa-check"></i></span> 
    </label> 
</div>

外部CSS

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

我有一個自定義的CSS複選框。假設當我縮小屏幕寬度時，複選框和刻度符號的大小將縮小。

無論多小的屏幕尺寸，在IE中都可以正常工作，並且刻度可能會非常小，而且可以預期。問題在於Chrome，當屏幕寬度非常小時，刻度符號會溢出。

我已經設置了JSFiddle https://jsfiddle.net/7fuL1zh3/5/ 希望有人能給我一個手感謝。

來源

2017-09-20 Siri How

您已經使用「vw」作爲字體大小和位置等單位。所以「vw」表示它是相對於視圖端口的寬度。因此，在調整瀏覽器/視口的大小時，這些值相對應用。

您可以使用絕對長度單位，而不是相對長度單位。

例如， font-size: 1.5px

Ref。 https://www.w3schools.com/cssref/css_units.asp

來源

2017-09-20 06:15:27 sajee

px不是我的選擇，因爲我的頁面是響應式設計，所以我必須使用vw，以便所有元素和字體的大小將根據屏幕寬度進行更改。主要的一點是JSFiddle在IE下工作，所以我認爲Chrome有問題或錯誤。無論如何感謝 –

您的IE瀏覽器的版本是什麼？我使用的是IE 11，和Chrome一樣的行爲。 – sajee

所以，請檢查「VW」的瀏覽器版本的支持 – sajee

Chrome的CSS變換規模/字體大小的問題

回答

相關問題