Question

我似乎无法弄清楚为什么h1标签在移动浏览器上的显示方式不同。

该网站是www.jd-financialservices.co.uk当我在桌面上查看该网站时，一切都很好。然而，当我在Nexus 4上查看它时，h1和.topbar div之间的10px间隙已经消失。在Opera，Firefox和Chrome上也是如此。

有人可以帮忙吗？

提前谢谢。

Answer 1

我建议不要在所有元素上使用position:relative;和否定top。

对你的CSS进行一些小的改动你可能会发现它自己修复了：这是你的css的更新版本。看看是否能解决问题。

我更新了：aside nav h1 .welcome和footer。通过更改某些header元素以使用position:absolute，然后使用margin将元素空格化。你可能会发现css是更兼容的跨浏览器/设备。

@font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}

* {
    margin-top: 0px;
    margin-bottom: 0px;
}

html {
    font-family: 'droid sans';
     -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
    width: 940px;
    margin: 0 auto;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #ffffff;
}

a:hover {
    text-decoration: underline;
}

header a:hover {
    text-decoration: none;
}

h1  {
    font-family: 'Constantia', helvetica;
    position: absolute;
    top: 20px;
}

header {
    height: 140px;
    position: relative;
    margin-bottom: 40px;
}

nav {
    width: 660px;
    height: 30px;
    background-color: #00788a;
    position: absolute;
    font-size: 1.2em;
    bottom: 0;
    right: 0;
}

nav li a {
    color: #ffffff;
}

nav a:hover {
    text-decoration: underline;
}

nav ul {
    padding-left: 0px;
}

nav ul li {
    display: inline;
    line-height: 30px;
    vertical-align: middle;
    color: #ffffff;
    padding-left: 70px;
    padding-right: 65px;
}

aside {
    height: 600px;
    width: 240px;
    float: left;
    background-color: #00788a;
    color: #ffffff;
    clear: both;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}

article a {
    color: #00788a;
}

.contain {
    width: 940px;
}

footer {
    height: 100px;
    clear: both;
    background-color: #00788a;
    color: rgba(255,255,255,0.5);
    position: relative;
    font-size: 0.85em;
    padding: 0 10px;
    line-height: 1.5em;
    margin-top: 40px;
}

footer li {
    display: inline;
    border-left: 2px solid rgba(255,255,255,0.5);
    padding: 0 5px;
}

footer li:first-child {
    border: none;
}

footer ul {
    padding-left: 0;
    text-align: center;
}

.foot_fade {
    color: rgba(255,255,255,0.5);
}

.first_initial {
    font-size: 110px;
    color: #00788a;
    font-weight: lighter;
}

.second_initial {
    font-size: 101px;
    color: #00788a;
    font-weight: lighter;
    position: relative;
    top: -6px;
}

.rest_of_title {
    font-size: 26px;
    position: relative;
    left: -73px;
    top: 20px;
    font-weight: lighter;
}

header a {
    color: #000000;
}

.header_background {
    float: right;
    position: relative;
    z-index: -1;
}

.topbar {
    width: 940px;
    height: 30px;
    background-color: #00788a;
}

.call_now {
    padding: 10px 50px 10px 50px;
    font-size: 1.5em;
    line-height: 1.5em;
    border-bottom: 5px solid #ffffff;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.home_service {
    padding: 10px 40px 10px 40px;
    font-size: 1.45em;
    line-height: 1.5em; 
    border-bottom: 5px solid #ffffff;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.service_list {
    font-size: 1.25em;
    line-height: 3em;
    text-align: left;
    padding-top: 35px;
    padding-left: 20px;
    text-shadow: 2px 2px 2px #2a2a2a;
}

.welcome {
    width: 660px;
    float: right;
    padding: 0px 0px 0px 40px;
    font-size: 0.9em;
    line-height: 2em;
    color: #2a2a2a;
    position: relative;
    /* top: -95px; */
    text-align: justify;
}

.services {
    width: 660px;
    float: right;
    padding: 0px 0px 0px 40px;
    position: relative;
    top: -95px;
}

.services a {
    text-decoration: none;
    position: absolute; 
    top: 151px; 
    left: 0; 
    width: 275px;
    color: #ffffff;
    background-color: rgba(0,0,0,0.5);
    padding: 10px 0 10px 10px;
}

.services div {
    margin-bottom: 15px;
}

.services div:last-child {
    margin-bottom: 0;
}

.savings_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.retire_pic {
    position: absolute;
    top: 0;
    right: 0;
    height: 190px;
    width: 285px;
}

.protection_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.insurance_pic {
    position: absolute;
    top: 205px;
    right: 0;
    height: 190px;
    width: 285px;
}

.mortgage_pic {
    position: relative;
    height: 190px;
    width: 285px;
}

.retire {
    width: 300px;
    float: right;
    margin: 0 0 10px 10px;
}

/*.shadow {
    box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
    margin: 3px 0;
}*/

.overlay {
    background-color: rgba(0, 0, 0, 0.5);
    bottom: 54px;
    color: #FFFFFF;
    padding: 10px;
    position: relative;
    width: 265px;
}

.overlay a {
    text-decoration: none;
    color: #ffffff;
}

.overlay a:hover {

}

.left {
    float: left;
}

.right {
    float: right;
}

.regulation {
    font-style: italic;
    color: #9a9a9a;
    font-size: 0.9em;
}

.smallprint {
    width: 520px;
    font-size: 0.9em;
    text-align: center;
    position: absolute;
    right: 210px;
    top: 30px;
}

.copyright {
    width: 310px;
    margin: 0 auto;
    }

.scapa {
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 0.9em;
}

h1标签定位在移动浏览器上

1 个答案: