我在Mac上使用Chrome / Firefox。请查看this page。
有一个水平滚动条,右边有额外的边距。在Stackoverflow嗅探我发现它与H1(H2)上的宽度= 100%有关...因为跳过它额外的边距消失...... :)但是现在H1是在左边,那不是我想要的...... :(
header
{
background-color: #73020c;
padding-bottom: 110px; /* to push .banner down */
}
hgroup
{
position: relative;
text-align: center; /* to center h1 en h2 */
z-index: 1;
}
h1
{
font-family: 'BebasNeueRegular', sans-serif;
color: #fff;
line-height: 100%;
font-weight: normal;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
margin-left: -50%; /* half the width */
z-index: 2;
letter-spacing: 0.15em;
padding-left: 0.15em; /* to compensate letter-spacing h1 */
}
h2
{
font-family: 'MutluOrnamental', sans-serif;
line-height: 100%;
font-weight: normal;
color: #b7b7b7;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
margin-left: -50%; /* half the width */
z-index: 3;
padding-top: 10px; /* !important > to make h2 fit in relation to h1 */
}
/* for all browser including all IE! */
h2 {
opacity: 0.75;
zoom: 1;
filter: alpha(opacity=75);
}
答案 0 :(得分:1)
我刚刚在Safari中对此进行了测试(由于它也基于Web工具包,因此显示了相同的问题)。
我将其修复如下:
h1
{
font-family: 'BebasNeueRegular', sans-serif;
color: #fff;
line-height: 100%;
font-weight: normal;
text-transform: uppercase;
position: absolute;
top: 50%;
height: 100%;
z-index: 2;
letter-spacing: 0.15em;
text-align: center;
}
我删除了-50%的居中方法,以便不会将块推离页面(导致问题)并退回到text-align:center。我还必须删除这一行:
padding-left: 0.15em; /* to compensate letter-spacing h1 */
但在视觉上,在我看来,这不会造成任何问题。
添
答案 1 :(得分:0)
因此必须使用box-sizing
扩展H1:
h1
{
font-family: 'BebasNeueRegular', sans-serif;
color: #fff;
line-height: 100%;
font-weight: normal;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
margin-left: -50%; /* half the width */
z-index: 2;
letter-spacing: 0.15em;
padding-left: 0.15em; /* to compensate letter-spacing h1 */
-webkit-box-sizing: border-box; /* content-box */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
......还有polyfill ......:)