絕對定位元素在高DPI顯示不對齊

我正在爲我的一個類的項目工作，並遇到了一個奇怪的定位問題。我有兩個齒輪圖標顯示帶有文本標誌的字體真棒庫。一個齒輪的尺寸較大並略微偏離屏幕而另一個齒輪的位置幾乎接觸較大的齒輪。在我的筆記本電腦中，元素以默認的16px字體大小正確顯示。當我切換到我的桌面（50英寸4k電視顯示器，鉻合金設置爲增加20px的字體大小時），齒輪不對齊。絕對定位元素在高DPI顯示不對齊

我的問題：如何定位這兩個圖標，使它們一致，而不管用戶定義的文本大小？

相關CSS：

div.logo i.cog-logo-small { 
    font-size: 1.5em; 
    top: 20px; 
    left: 32px; 
} 

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: -15px; 
    left: -15px; 
}

相關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>

來源

2017-05-26 Jesse Harlan

這是您的代碼...它是否重現您當前的佈局？他們不會在不同的屏幕尺寸下爲我移動。 https://codepen.io/anon/pen/EmJdOL –

這個問題不是屏幕大小，而是用戶在Chrome中設置自定義字體大小。由於我的屏幕的實際大小，我當前的桌面必須使用更大的字體大小，而我的桌面在chrome設置中使用標準字體大小。即使您鏈接的代碼筆示例在更改chrome的字體大小時也具有相同的效果（您可以通過轉到chrome：// settings>高級設置> web內容>字體大小進行復制） –

您應該儘量不將'em'這是一個非常具體的'px'的相對大小。 –

問題出在固定單位（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>

來源

2017-05-26 23:19:47

作爲@邁克爾焦化想通了，這個問題是在結合PX和EM測量。切換到翻譯將解決此問題，並允許在瀏覽器中切換字體大小時縮放文本圖標。

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

如果這不起作用，您可能還會嘗試將所有測量值轉換爲em，並且它會創建類似的效果。

來源

2017-05-26 23:05:34

絕對定位元素在高DPI顯示不對齊

回答

相關問題