css - ズーム時にボタンのテキストの外観を維持する

Question

編集：これはmacOScatalinaで修正されていることがわかりました。道中ご無事に！

ユーザーがズームインまたはズームアウトしたときにボタンの外観を維持するにはどうすればよいですか？テキストとボタンの端の間の間隔は、一貫性を保つ必要があります。

この質問のjsfiddle

ここに描かれているフィドルに取り組んでください：http：//jsfiddle.net/DevinRhode2/B4Usb/5/

ブラウザのズームを100％に設定zoom: 1.1;し、フィドルから削除すると、テキストが完全に含まれ、中央に配置されたボタンが表示されます。この外観が目標です。

おそらく、必要な変更を加えて、ネイティブのMacスタイルのボタンのCSSを再作成する方が簡単です。

これを修正するか、あるいは同じOS Xスタイルを再作成するのは簡単ではないので、私は賞金を始めました。

score 1 · Accepted Answer

クロム、ファイアフォックス、IE でチェックしましたが、すべてが適切にズームされ、ボタンの境界外のテキストは表示されません。http://i.imgur.com/q3mZ7.png

score 0 · Accepted Answer

Chrome で OSX を使用すると、実際に問題が発生しました。これは、OSX のボタンのデフォルトスタイルルールがひどく処理されているためです。

ボタンに独自の背景スタイルを追加することで修正できます。

#fixed {
    background: #eee;
    border: 0;
}

スタイル付きボタンのデフォルトの境界線は uuugly であるため、境界線も削除しました。

2 に答える 2