Chrome css 转换比例/字体大小问题答案

【问题标题】：Chrome css transform scale/font-size issueChrome css 转换比例/字体大小问题
【发布时间】：2018-02-28 23:13:26
【问题描述】：

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/ 希望有人能帮我一把谢谢。

【问题讨论】：

标签： html css google-chrome font-size

【解决方案1】：

您使用“vw”作为字体大小和位置等的单位。所以“vw”的意思是，它是相对于视口的宽度。因此，在调整浏览器/视口的大小时，这些值相对适用。

您可以使用绝对长度单位，而不是使用相对长度单位。

例如。 font-size: 1.5px

参考。 https://www.w3schools.com/cssref/css_units.asp

【讨论】：

px 不是我的选择，因为我的页面处于响应式设计中，所以我必须使用 vw 以便更改所有元素和字体的大小取决于屏幕宽度。要点是 JSFiddle 在 IE 下工作，所以我认为 Chrome 有问题或错误。还是谢谢
你的IE浏览器是什么版本的？我正在使用 IE 11 和 chrome 等相同的行为。
所以请检查浏览器版本是否支持“vw”
我的 IE 版本是 11.0.9600 18738。我在这里捕获了我的屏幕：imgur.com/a/YbakO 你会看到 IE 中的刻度总是按比例显示，而 Chrome 有问题。我发现一个讨论说 Chrome 无法显示小于 12 像素的字体大小。 Chrome 总是将小于 12px 的字体视为 12px，这样当屏幕宽度减小时，字体不会变小。
我目前的 IE 和 Chrome 都支持 vw。最初，当屏幕宽度从 1500 像素变为 1000 像素时，刻度字体（IE 和 Chrome）是按比例缩放的。我的问题是当我将屏幕宽度缩小到非常非常非常小的像 100px 时，Chrome 中的刻度字体就像冻结在 12px 并且不能变小，而 IE 可以有一个非常非常小的字体来保持刻度比例字体