Question

我正在为我的一个班级开设一个项目，并遇到了一个奇怪的定位问题。我有两个齿轮图标来自字体真棒图库，带有文字标识。一个齿轮的尺寸较大并且稍微偏离屏幕，而另一个齿轮几乎接触较大的齿轮。在Chrome中我的笔记本电脑上，元素以默认的16px字体大小正确显示。当我切换到我的桌面时（配有一个50英寸4k电视显示器，镀铬设置，将字体大小增加到20px），齿轮不对齐。

我的问题：无论用户定义的文字大小如何，我如何定位这两个图标以使它们保持一致？

相关HTML

<nav class="top-bar clearfix">
    <div class="logo">
        <a href="index.html">
            <i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
            <i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
            <span class="logotext">logotext</span>
        </a>
        <span class="tagline">tagline</span>
    </div>
</nav>

Answer 1

正如@Michael Coker所知，问题在于结合px和em测量。切换到翻译将解决问题，并允许在浏览器中切换字体大小时缩放文本图标。

div.logo i.cog-logo-small {
  font-size: 1.5em;
  transform: translate(20%,20%);
}

如果这不起作用，您也可以尝试将所有测量值转换为em，它会产生类似的效果。

Answer 2

问题在于固定单位（px）的定位。在放大浏览器时，固定单位通常不会按预期进行缩放。更好的方法是使用相对单位（em，%等），这些单位会随着缩放级别的变化而相对变化。

以下是使用em

的top/left的解决方案

div.logo i.cog-logo-small {
    font-size: 1.5em;
    top: 1em;
    left: 1em;
}

div.logo i.cog-logo, div.logo i.cog-logo-small {
    position: absolute;
}

div.logo i, div.logo a {
    color: #c06014;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

div.logo i.cog-logo {
    font-size: 3em;
    top: -.25em;
    left: -.5em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="top-bar clearfix">
  <div class="logo">
    <a href="index.html">
      <i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
      <i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
      <span class="logotext">logotext</span>
    </a>
    <span class="tagline">tagline</span>
  </div>
</nav>

或者另一个使用%与transform: translate()

结合使用

div.logo i.cog-logo-small {
  font-size: 1.5em;
  transform: translate(20%,20%);
}

div.logo i.cog-logo,
div.logo i.cog-logo-small {
  position: absolute;
}

div.logo i,
div.logo a {
  color: #c06014;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div.logo i.cog-logo {
  font-size: 3em;
  transform: translate(-85%,-65%);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="top-bar clearfix">
  <div class="logo">
    <a href="index.html">
      <i class="cog-logo fa fa-cog gear-spin fa-3x" aria-hidden="true"></i>
      <i class="cog-logo-small fa fa-cog gear-spin-reverse fa-2x" aria-hidden="true"></i>
      <span class="logotext">logotext</span>
    </a>
    <span class="tagline">tagline</span>
  </div>
</nav>

高dpi上的绝对定位元素显示不对齐

2 个答案: