h1標籤在手機瀏覽器上的定位

Question

我似乎無法弄清爲什麼h1標籤在移動瀏覽器上顯示不同。

該網站是www.jd-financialservices.co.uk當我在我的桌面上查看網站時，一切都很好。但是，當我在Nexus 4上查看它時，h1和.topbar div之間的10px間距已經消失。在Opera，Firefox和Chrome上也是如此。

任何人都可以幫忙嗎？

預先感謝您。

Answer 1

我建議不要在所有元素上使用position:relative;和負。

隨着你的CSS的一些小的改變，你可能會發現它修復了自己：這是我的更新版本的CSS。看看是否能解決問題。

我更新：asidenavh1.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; 
}