在iPad视图中页面看起来不同 - CSS问题

Question

我在iPad上打开时遇到this page问题。深红色的顶部识别标题向左，然后在右侧，您可以看到一个空白区域。包括Safari在内的所有其他主流浏览器都显示除iPad之外的页面。这是iPad view的屏幕截图。任何想法都有错吗？

Answer 1

首先，看起来左上角的大学徽标设置为<a>中的背景图像和常规图像。删除常规图像可以解决iPad屏幕截图和桌面浏览器中出现的问题，左侧是徽标，“大学”中是“ity”。

我面前没有ipad，但也有可能用正确的空间解决问题。您可能需要考虑在标题中向表单添加margin-right，以便“Go”按钮不会以1024px分辨率对着窗口边缘。

Answer 2

#signature div中的内容大于#signature div，因此背景不会拉伸以适应内容（您可以通过缩小窗口大小并向左或向右滚动来获得相同的反应）。

修正：

• 从#signature a.iu
中删除left: -5px;
• 将background: #7D110C添加到#signature
• 将#signature表单上的right: 0更改为right: 5px。

那应该把事情弄清楚。

修改

以下是您更新的样式应该是什么样的。

#identity #signature {
    height: 44px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 990px;
    background: #7D110C;
}

#identity #signature a.iu {
    background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
    display: block;
    height: 44px;
    position: relative;
    top: 0;
    width: 250px;
}

#identity form {
    height: 44px;
    position: absolute;
    right: 5px;
    top: 0;
}

我从screen.css

中删除了这些样式