问题：

为什么safari的元素宽度与chrome和firefox在使用自定义字体系列时有很大的不同？

华和悦

2023-03-14

以下是Javascript的offsetWidth的结果：

Chrome没有自定义字体系列：Mozilla/5.0（Macintosh；英特尔Mac OS X10_12_6）AppleWebKit/537.36（KHTML，像壁虎）Chrome/60.0.3112.90Safari /537.36

元件偏移网络宽度=393

Firefox无自定义字体系列：Mozilla/5.0（Macintosh；Intel Mac OS X 10.12；rv： 54.0）Gecko/20100101 Firefox/54.0

元件偏移网络宽度=393

不带自定义字体系列的Safari:Mozilla/5.0（Macintosh；英特尔Mac OS X 10_12_6）AppleWebKit/603.3。8（KHTML，类似Gecko）版本/10.1。2 Safari/603.3。8.

元件偏移网络宽度=394

现在，在样式中为-tag取消注释自定义字体族时。css:

带有定制字体系列的Chrome：Mozilla/5.0（Macintosh；英特尔Mac OS X 10_12_6）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/60.0。3112.90狩猎/537.36

元素offsetWidth=416

具有自定义字体系列的Firefox:Mozilla/5.0（Macintosh；英特尔Mac OS X 10.12；rv:54.0）Gecko/20100101 Firefox/54.0

元素offsetWidth=416

带有自定义字体系列的Safari：Mozilla/5.0（Macintosh；英特尔Mac OS X 10_12_6）AppleWebKit/603.3。8（KHTML，类似Gecko）版本/10.1。2 Safari/603.3。8.

元件偏移网络宽度=1047

什么元件偏移网络宽度=1047？为什么？发生了什么？代码出了什么问题，还是safari中的错误？

我想，这（错了？）Safari的行为将对下面的css-动画产生影响，其中@keyframe中的百分比x位置将取决于元素宽度。

顺便说一下，Safari用自定义字体打破动画文本-家庭任意！！！

我希望，有人给我一个解释，提前感谢：-）

下面是代码文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">

<title>Element Width</title>

<!-- loading from google fonts -->
<!-- font-family: 'Open Sans', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<!-- loading with google's webfont loader -->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Open+Sans']
        }
    });
</script>
-->

<!-- font-face -->
<!-- <link rel="stylesheet" href="font/open_sans/styles.css"> -->

<!-- default styles -->
<link rel="stylesheet" href="css/styles.css">

<!-- animation styles -->
<!-- <link rel="stylesheet" href="css/animate.css"> -->

</head>
<body>

    <div class="wrapper">

        <span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>

        <p class="info"></p>

    </div>

    <script>

        function setElementInfo() {
            var element = document.querySelector('.text');
            var info    = document.querySelector('.info');
            var message = navigator.userAgent + '<br>' + 'element offsetWidth = ' + element.offsetWidth;
            info.innerHTML = message;
        }

        // setElementInfo();
        window.addEventListener('load', setElementInfo);

    </script>

</body>
</html>

css/样式。css

*,
*:before,
*:after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {

    /* system font */
    font-family: Arial;

    /* custom font */
    /*font-family: "Open Sans", sans-serif;*/
}

.wrapper {
    background-color: #5ad;
}

.text {
    display: inline-block;
    color: #fff;
    background-color: #da5;
}

css/动画。css

.wrapper {
    width: 960px;
    margin: 30px auto;
    overflow: hidden;
}

.text {

    padding-left: 100%;
    white-space: nowrap;

    -webkit-animation: animate 7s linear 0ms infinite;
            animation: animate 7s linear 0ms infinite;
}

.text:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

@-webkit-keyframes animate {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

@keyframes animate {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}

共有1个答案

萧繁

2023-03-14

我不认为这部动画的工作方式有任何问题；因为转换值是%，所以一切都是相对的。

transform:translate3d（-100%，0，0）

在Chrome和Safari中查看此代码笔，结果看起来相同：https://codepen.io/segheysens/pen/gxWXaZ

类似资料：

测量图像的宽度和高度在Chrome和Firefox中返回0，但在Safari中有效

我正试图给我的图像一个风景或肖像类在一个Wordpress图像库通过测量图像的尺寸负载。该代码在Safari中工作，但Firefox返回0像素的宽度和高度，Chrome有时会正确加载它们，有时则不会。我很困惑，有人能帮我吗？
Selenium sendKeys（）适用于Chrome、Firefox和Safari的不同行为

下面是一些简单的代码片段。在火狐一切正常。在Chrome中，我得到了“org.openqa.selenium.WebDriverException:未知错误：无法聚焦元素”错误 Safari不会对sendKeys（）作出反应我还尝试使用另一种方法：此代码修复了Chrome错误，但浏览器仍然不会对事件 Safari和Firefox对sendKeys（）也没有反应。我无法理解正在发生什么，以
使用JavaScript获取图像的实际宽度和高度？（在Safari / Chrome中）

问题内容：我正在创建一个jQuery插件。如何在Safari中使用Javascript获得真实的图像宽度和高度？以下适用于Firefox 3，IE7和Opera 9：但是在Webkit浏览器中，例如Safari和Google Chrome的值为0。问题答案： Webkit浏览器在加载图像后设置height和width属性。建议不要使用超时，而建议使用图像的onload事件。这是一个简单的
比较chrome和Firefox的字体大小问题

问题内容：我建立了一个网站，问题是Chrome的显示尺寸大于Firefox。我尝试了几种匹配字体大小的方法，以px为单位指定字体，以％设置正文为100％，然后将元素设置为。这些都不起作用。静止图像显示的铬要大1个像素。这是我用于字体大小的代码：在#geral包裹整个站点的地方，而CSS上没有其他font-size语句，可以在我发布的链接中查看源代码。我想知道是否有一种方法可以解决此问题，或
为什么锚标记不包含其包含元素的高度和宽度

问题内容：当我使用Chrome开发人员工具检查定位标记的大小时，它会向我显示第一个元素和第二个元素。我想知道为什么它不包含包含元素的高度和宽度以及它是如何计算的。问题答案：在CSS 2.1规范说框内容区域的尺寸（内容宽度和内容高度）取决于几个因素：生成框的元素是否设置了“宽度”或“高度”属性，该框是否包含文本框或其他框，是否框是一个表格，等等。框的宽度和高度将在有关可视格式模型详细信息的
在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行

本文向大家介绍在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行相关面试题，主要包含被问及在固定宽度的div下，怎么让字体自适应大小，不超出宽度，也不要换行时的应答技巧和注意事项，需要的朋友参考一下 https://css-tricks.com/fitting-text-to-a-container/

为什么safari的元素宽度与chrome和firefox在使用自定义字体系列时有很大的不同？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档