这是我的HTML,虽然我对每个div都有同样的问题,但是标签为“priser”的div最让我感到沮丧。我会给你一张照片,说明它如何导致从浏览器到浏览器的不同位置(名为“Prisinformasjon”的矩形是“priser”-div的输出):
<form method='POST' id='form1' runat='server' autocomplete='off'>
<div id="screenie" style="position: relative; width: 100%; height: 100%; font-family: 'Malgun Gothic'; font-weight: 400;">
<div style="margin-top: 15px;">
<div id="Tjenesteinformasjon" style='width: 300px; height: 335px; text-align: center; position: absolute; left: 30px; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<span style='font-size: 26px;'>Hva gjør vi?</span><br />
<p style='color:black;'>Vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br />
Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br />
Ønsker du å kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p>
</div>
<div id="Center-div" style="width: 550px; position: absolute; left: 380px;">
<div style='color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<div style="text-align: center;">
<div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; color: black; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;">
<img id="bil" src="/images/bil.jpg" onclick="changeImage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" />
<div id="skjematype_b">Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b></div>
</div>
<script>
function changeImage()
{
var bestillingstekst = document.getElementById('bestillingstekst')
var bestillingstekst2 = document.getElementById('bestillingstekst2')
var block = document.getElementById('skjematype_a')
var s_text = document.getElementById('skjematype_b')
var image = document.getElementById('bil');
if (image.src.match("bil"))
{
image.src = "/images/henger.jpg"
s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>"
bestillingstekst.hidden = 'hidden'
bestillingstekst2.hidden = ''
}
else
{
image.src = "/images/bil.jpg";
s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b>"
bestillingstekst.hidden = ''
bestillingstekst2.hidden = 'hidden'
}
}
</script>
<div id='bestillingstekst' class='bestillingstekst'>
<p>
<span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
<span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
</p>
<p class='question'>Hvilke tjenester ønsker du?</p>
<label>Flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label>
<label>Flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></>
<label>Transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></>
<p class='question'>Hvordan ønsker du å betale?</p>
<label>Kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></>
<label>Faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></>
<p class="question">Hva synes du er en god pris for jobben?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'>
<label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris1' type='tel' maxlength='8' runat='server'/></label>
</div>
<p class='question'>Er du privatperson eller bedrift?</p>
<label>Privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></>
<label>Bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></>
<p class='question'>Hvordan kontakter vi deg?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='personnavn' type='text' runat='server'/></label>
<br />
<label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='bedriftsnavn' type='text' runat='server'/></label>
<br />
<label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='alt_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Epost<input style='width: 150px; display: inline-block; float:right;' id='epost' type='email' runat='server'/></label>
<br />
</div>
<p class='question'>Hva er beste dato og tidspunkt for tjenesten(e)?</p>
<p class='psmall2'>(bare endr tidspunkt for tjenestene du skal ha)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
<label>Flyttehjelp<input style='width: 150px; display: inline-block; float:right;' id='fhjelp_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Utflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Tilflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid2' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Transport<input style='width: 150px; display: inline-block; float:right;' id='transport_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
</div>
<p class='question'>Hvor skal tjenesten(e) starte?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse1' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed1' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr1' type='text' maxlength='4' runat='server'/></label>
<br />
<label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje1' type='tel' maxlength='2' runat='server'/></label>
<br />
<label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype1' type='text' runat='server'/></label>
<br />
<label>Heis?</label>
<div style='display: inline-block; float:right;'>
<label>Ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label>
<label>Nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label>
</div>
<br />
</div>
<p class='question'>Hvor skal tjenesten(e) avslutte(s)?</p>
<p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse2' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed2' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr2' type='text' maxlength='4' runat='server'/></label>
<br />
<label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje2' type='tel' maxlength='2' runat='server'/></label>
<br />
<label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype2' type='text' runat='server'/></label>
<br />
<label>Heis?</label>
<div style='display: inline-block; float:right;'>
<label>Ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label>
<label>Nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label>
</div>
<br />
</div>
<p class='question'>Hva ønsker du fraktet (og annet vi bør vite)?</p>
<textarea id='textarea1' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
<button style='margin-top: 2px;' id='Button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>Kontakt meg med et tilbud!</button>
</div>
<div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'>
<p>
<span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
<span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
</p>
<p class='question'>Hvordan ønsker du å betale?</p>
<label>Kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></>
<label>Faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></>
<p class="question">Hva synes du er en god pris for leie?</p>
<p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris2' type='tel' maxlength='8' runat='server'/></label>
</div>
<p class='question'>Er du privatperson eller bedrift?</p>
<label>Privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></>
<label>Bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></>
<p class='question'>Hvordan kontakter vi deg?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='leie_personnavn' type='text' runat='server'/></label>
<br />
<label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='leie_bedriftsnavn' type='text' runat='server'/></label>
<br />
<label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Epost<input style='width: 150px; display: inline-block; float:right;' id='leie_epost' type='email' runat='server'/></label>
<br />
</div>
<p class='question'>Når ønsker du å leie?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
<label>Leiestart<input style='width: 150px; display: inline-block; float:right;' id='leiestart' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Leieslutt<input style='width: 150px; display: inline-block; float:right;' id='leieslutt' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
</div>
<p class='question'>Hva er adressen din?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='leie_adresse' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='leie_poststed' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_postnr' type='text' maxlength='4' runat='server'/></label>
<br />
</div>
<p class='question'>Noe mer vi bør vite?</p>
<textarea id='textarea2' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
<button style='margin-top: 2px;' id='Button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>Kontakt meg med et tilbud!</button>
</div>
</div>
</div>
</div>
<img style="width: 315px; height: 245px; position:absolute; left: 955px;" src='/images/logo.jpg'/ alt='logo'/>
<div id="Priser" style="width: 300px; position:absolute; left: 45px; top: 375px">
<div style="text-align: center; color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
<span style='font-size: 26px;'>Prisinformasjon:</span><br />
<p>
Priser avtales som en fast sum på forhånd! Du skal aldri betale mer enn denne prisen!<br />
<span style="color: red; font-weight: 600; font-size: 19px;">Det er viktig for oss at du er fornøyd med prisen din! Derfor kan du gi oss et tilbud i bestillingskjema til høyre! Ikke glem å fortell oss hva du ønsker!</span>
</p>
</div>
</div>
<div id="Kontaktinformasjon" style='width: 300px; height: 190px; position:absolute; left: 30px; top: 700px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<span style='font-size: 26px;'>Hvordan kontakte oss?</span><br />
<p style='color:black;'>epost: post@hjelpsommefolk.no<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/>
Postadresse: Nøsteveien 60, 3413 Lier<br/>Kontaktperson: Mantas Tamosiunas</p>
</div>
<div id="Finn" style='width: 300px; height: 265px; position:absolute; left: 950px; top: 265px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<p style="font-size: 16px; font-style: italic;">Se våre finn.no referanser i linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p>
<img style="" src='/images/finn1.PNG'/>
<img style="" src='/images/finn2.PNG'/>
<img style="" src='/images/finn3.PNG'/>
</div>
<div id="Facebook" style="width: 300px; position:absolute; left: 965px; top: 580px;">
<div style="text-align: center;">
<div style="color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
<h4 style="font-style: italic;">
Liker du oss? Vis det her! <3
</h4>
<div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<br />
<div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var screen_width_string = ((screen.width * 0.5)-(1265*0.5)-30);
var screen_width_string = screen_width_string + "px";
document.getElementById('screenie').style.marginLeft = screen_width_string;
</script>
</form>
答案 0 :(得分:1)
你必须使用边距来调整它,因为它没有正确显示。正如Niet所说,至少在目前使用绝对定位时,没有办法赢得与浏览器的斗争。