iPhone Safari上的定位和字体大小问题
我想让这个网站:http://501commons.org在iPhone上与其他浏览器上的相同。在Android上,它工作得很好。我已经将-webkit-text-size-adjust: 100%;
添加到了身体风格,这对此有所帮助。什么是仍然没有工作有以下几件,我想不通为什么移动Safari浏览器不能正常显示它们:iPhone Safari上的定位和字体大小问题
- 左上角的标志只是普通不会出现
- 在搜索框中右上方距离太远
- 标题为“非营利资源等的资源”中的红色口号太大,太低,并超出右边框
- 三个导航菜单项的字体(探索下议院,志愿者,投资)太大
其他一切似乎都没问题,至少在主页上。奇怪的是,上述所有四个问题都出现在标题中。
任何帮助将非常感激! 谢谢!
我想通了:
左上标志
标志没有显示出来,到一个陌生的非级联的问题所致。徽标是<a id="portal-logo" ...>
内的<img>
选项卡。 #portal-logo
在应用于它的倒数第二个样式表中有display: inline-block;
规则,但不在最后一个样式表中。换句话说,这是我们所拥有的:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
添加display: inline-block;
最后一个样式表使神奇的标志出现。然后,我还不得不拨弄margin
s,position
,top
等,以使它出现在正确的位置,但所有这些都在只在移动浏览器上有条件加载的CSS文件中,所以没关系。这真的很奇怪,iOS上的Safari不会级联display: inline-block;
风格!
搜索框中
我做了搜索框,在适当的地方被渲染加入text-align:right;
它的容器,即使与text-align:left;
同一容器较早的规则使得它在其他浏览器的工作只是罚款。
口号
的口号所需要的大部分调整。它包含在<div id="slogan">
中。这里是旧规则:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
这里是新规则能在移动Safari浏览器的工作原理:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
其中一个关键区别是在PX绝对font-size
,而不是作为一个百分比值。
菜单项字体
同样,指定在像素代替%的font-size
似乎是这里的关键:
老:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
新:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}