0

私はこのサイトに取り組んでいます: http://sbw.aaugirlsbasketball.org/

クライアントは、Windows 10 マシンで IE 11 を使用していて、タイトル「AAU Girls Basketball」が特定の解像度で 2 行に分割されていると述べています。<header id="skin_header">タグで IE の Inspect Element を使用したときに検出されるおおよその画面幅は次のとおりです。

  1. 幅 1320px: OK
  2. 幅 1300px: 2 行に分割
  3. 幅 1140px: OK
  4. 幅 1065px: 2 行に分割
  5. 幅 984px: 小さくなりますが、まだ壊れています。ここからテキストのサイズが変わりますが、760px になるまで壊れ続けます。

スクリーンショットは次のとおりです。ここに画像の説明を入力

以下の CSS でわかるように、 に追加しようとしspan.head1 { white-space: nowrap; }ましたが、うまくいかなかったようです。IE に問題を再現させることができず、開発者にも再現させることができません。

HTML:

<div class="headertitle">
    <div class="titlehead">
       <span class="head1">AAU GIRLS BASKETBALL</span>
       <br>
       <span class="head2">THE OFFICAL HOME OF THE AMATER ATHLETIC UNION GIRLS BASKETBALL</span>
     </div>
 </div>

CSS:

.headertitle {
  background-image: url("../images/title_bg.png");
  background-position: 88% 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 98px;
  margin-top: 7px;
  position: absolute;
  right: -40px;
  width: 82%;
  z-index: 1;
}
.titlehead {
  margin-left: 49px;
  margin-top: -10px;
  width: 100%;
 }
span.head1 {
  color: #ffffff;
  font-family: "Roboto",sans-serif;
  font-size: 49px;
  font-weight: 900;
  text-shadow: 3px 5px 7px #070707;
  white-space: nowrap;
}
span.head2 {
  color: #ffffff;
  font-family: "Open Sans",sans-serif;
  font-size: 16px;
}

画面が小さくなったときにクライアントの headertitle が 2 行に分割されないように、だれかがこの問題を再現して解決策を提供できますか?

4

0 に答える 0