0

GitHub のスライド ファイル ブラウザに似たものを設計しようとしています。github スライディング ファイル マネージャー

それはほとんど機能していますが、スタイルを設定しようとしていますが、境界線でこれを取得します:

境界のずれ

.claim-header, .support-header{
   text-align: center;
   background-color: $argument-review-banners;
  padding: 0.3em;
  font-family: "Jockey One",Arial,Georgia,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px; // <--- this line breaks it
  text-transform: uppercase;
  border-color: black;
  border-style: solid;
}

div内のフォントサイズ（これらの行のそれぞれは、実際にはテーブルではないため、実際にはテーブルではないため、divです）がそれを壊すものであるかのように見えます。計算を行うようですフォントサイズにより幅が異なります。susy は、要素のフォントではなく、基本フォントに基づいて幅を計算すると思いました。2 ピクセルずれており、これは何らかの丸め誤差ではないかと思います。

さらに別のラッパー divで修正できます。しかし、私は適切な解決策が何であるか疑問に思っています。

4

1 に答える 1

1

この問題は Susy とは関係ありません。em ベースの幅でも同じ問題が発生します。Susy は、ユーザーがフォント サイズを変更したこと、または別の値を使用したいことを知る方法がありませんem。これらはすべてブラウザー レベルで計算されます。

ミックスインは、使用する場所ごとに同じ幅containerを出力します (同じ設定が与えられた場合) が、em はローカルの font-size に相対的です。emこれはブラウザによって計算されたものであり、Susy はそれを認識したり制御したりすることはできません。いくつかのオプションがあります。

  • rem最新のブラウザーでは、代わりに (root em) 値でグリッドを構築できます。
  • 設定を使用して$container-width、計算された幅をオーバーライドできます。px、% を使用するか、幅を設定します。
  • <body>これらすべての要素の周りに単一の外部コンテナー (おそらく ?) を設定できます。
  • コンテナーではなく、ネストされた要素でフォント サイズを変更できます。
于 2013-05-17T21:56:28.830 に答える