0

我在这个网站上工作： http: //sbw.aaugirlsbasketball.org/

客户说他在 Windows 10 机器上使用 IE 11，标题“AAU Girls Basketball”在特定分辨率下分成 2 行。<header id="skin_header">这些是在标签上使用 IE 中的 Inspect Element 时发现的近似屏幕宽度：

  1. 1320px 宽：好的
  2. 1300px 宽：分成两行
  3. 1140px 宽：好的
  4. 1065px 宽：分成两行
  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;
}

任何人都可以复制这个问题并提供解决方案，以便我的客户标题标题不会随着屏幕变小而分成两行吗？

4

0 回答 0