Lenovo ThinkPadのウェブサイトからのアイコン

Question

これはかなり奇妙な質問ですが、少なくとも解決策や可能性を見つけるのを手伝ってください。

私たちのウェブサイトでは、中央に「+」の丸いボタンがいくつかあります。このボタンをクリックすると、下にある一連の他のボタンが開きます。

これらのポップアップボタンは、それぞれが24pxの幅と高さに合わせたアイコンを中心コンテンツとして持つだけです。センタリングのために、left: 50%とtop:50%のメソッドとtransform:translate(-12px,-12px)のメソッドを使用します - フレックスボックスメソッドとは別の通常のセンタリングです。

すべてのテストでは、これらのアイコンはかなり中央に配置されています（もちろん、クロスブラウザーとクロスデバイスとのピクセルの違いは常にあります）。

最後に残っている問題は、Lenovo ThinkPad（選択したブラウザ）ではアイコンが離れた位置にあることです。左または下に5〜6ピクセルのように。この問題を今日までどのように修正できるかはわかりませんでした。

他のデバイスでは、Windowsとブラウザが同じでインストールされているノートパソコンまたはPCにすると、意図したとおりに表示されます。

私の質問：Lenovo ThinkPadがこれらのアイコンを異なる方法で表示しているのは誰ですか？ Lenovo ThinkPadがレンダリングしているものがあるのですか？それともDPIか、まったく気付いていないものがありますか？

あなたの可能な回答に多くの感謝をします。

Answer 1

すべての興味がある人こんにちは、私たちは、フォントファミリの問題を発見しました

：「マテリアルアイコン」。このCSSは、Lenovo ThinkPadに不自然な動作を加え、いくつかのアイコンの右側に奇妙な空白を追加します。

ご協力いただきありがとうございました。

Answer 2

device pixel ratioお使いのデバイスのtranslateと適切なピクセルを使用しても問題が発生する場合があります。

このwebsiteは、詳細を手助けすることができます。

メディアクエリーおよび変数ピクセルの比率を使用してターゲットにそれら：

@media only screen and (min-device-pixel-ratio: 2) { 
     /* your code */ 
}