1
我意识到这个问题已被多次询问，但所有时间都与我的问题无关。当我重新调整浏览器的大小时，所有使用'position：absolute'的元素都会在屏幕上移动，这意味着所有使用与我设计的浏览器不同的浏览器的人都会看到这一点。这是毁灭性的！我必须使用绝对定位，它可以让我在另一个图像上堆叠图像，这在我的网站中很重要。那么，我该如何解决这个问题，并使所有元素的行为相同？有没有办法强制浏览器为1366 x 768（我的浏览器大小），因为这是网站看起来很好的尺寸？如果你帮我，非常感谢。当我重新调整浏览器的大小时，元素的配置本身
定位position: absolute HTML和CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #cdcdff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
overflow-x: auto; /* for horizontal scrolling*/
overflow-y: auto; /* for vertical scrolling */
}
.twoColFixLtHdr #container {
width: 1024px;
background: #f2f2ff;
margin: 0 auto;
text-align: left;
height: 1050px;
}
.twoColFixLtHdr #header {
background: #DDDDDD;
width: 1024px;
height: 200px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp {
margin-top: 3%;
visibility: visible;
z-index: 10000;
text-decoration: none;
color: #000;
}
.twoColFixLtHdr #container #sidebar1 #ptext {
font-family: Calibri;
font-size: 12px;
width: 80%;
line-height: 125%;
margin-left: 8%;
margin-top: 2%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #second-pic {
width: 115px;
height: 170px;
margin-left: 6%;
}
.twoColFixLtHdr #container #header #home1 {
width: 110px;
height: 30px;
position: absolute;
top: 170px;
right: 617px;
z-index: 200;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp {
width: 100%;
height: 100%;
margin-top: 5%;
font-size: 12px;
font-family: Calibri;
color: #000;
text-transform: none;
text-decoration: none;
margin-left: 9%;
}
.twoColFixLtHdr #container #header #about1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 507px;
}
.twoColFixLtHdr #container #header #information1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 397px;
}
.twoColFixLtHdr #container #header #contact1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 287px;
}
.twoColFixLtHdr #container #header #usefullinks1 {
height: 30px;
width: 110px;
position: absolute;
top: 170px;
right: 177px;
}
.twoColFixLtHdr #sidebar1 {
float: left;
width: 25%;
background: #f2f2ff;
padding: 15px 10px 15px 20px;
}
.twoColFixLtHdr #container #sidebar1 #serieshyp #hyp2 {
margin-top: 3%;
margin-bottom: 6%;
color: #000;
}
#bolden {
margin-top: 4%;
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
margin-left: 8%;
}
h1 {
font-family: Calibri;
font-size: 18px;
font-weight: bolder;
}
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}
.twoColFixLtHdr #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
position: absolute;
width: 1024px;
height: 100px;
top: 1020px;
}
.twoColFixLtHdr #container #mainContent #yourweddingcerelogo {
width: 650px;
height: 49px;
position: absolute;
top: 213px;
left: 503px;
}
.twoColFixLtHdr #container #mainContent #secondlogo {
height: 49px;
width: 650px;
margin-bottom: 4%;
position: absolute;
left: 503px;
top: 650px;
margin-top: 1%;
}
.twoColFixLtHdr #container #mainContent #band {
position: absolute;
width: 130px;
visibility: visible;
left: 27
.%;
top: 200px;
left: 400px;
height: 122
..5%;
height: 1050px;
}
.twoColFixLtHdr #container #mainContent #contenttext {
margin-left: 13.5%;
margin-top: 10%;
width: 80%;
}
.twoColFixLtHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.twoColFixLtHdr #container #mainContent #secondarytext {
margin-left: 10%;
margin-top: 10%;
width: 60%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext2 {
width: 170px;
position: absolute;
right: 43
.%;
font-family: Calibri;
font-weight: bold;
font-size: 14px;
right: 525px;
top: 722px;
}
w {
font-family: Calibri;
font-size: 16px;
font-style: italic;
line-height: 1.6;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #2ndcoltext2 {
font-family: calibri;
font-size: 14px;
font-weight: bold;
position: absolute;
width: 14.2%;
right: 80%;
top: 87.7%;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcoltxt {
position: absolute;
right: 200px;
width: 175px;
top: 720px;
font-family: Calibri;
font-size: 14px;
font-weight: bold;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolmaintxt {
height: 140px;
width: 320px;
position: absolute;
left: 833px;
top: 820px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #secondtext3 {
width: 280px;
margin-left: 3.5%;
margin-top: 0%;
height: 200px;
position: absolute;
right: 538px;
}
.twoColFixLtHdr #container #mainContent #secondarytext #nekcolpic {
position: absolute;
height: 95px;
width: 130px;
right: 385px;
clear: both;
top: 723px;
}
.twoColFixLtHdr #container #mainContent #contenttext c {
font-family: Calibri;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
p {
font-family: Calibri;
font-size: 14px;
font-weight: 500;
}
-->
/*]]>*/
</style><!--[if IE 5]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
</head>
<!-- Main Class Plan -->
<body class="twoColFixLtHdr">
<div id="container">
<div id="header">
<!--img containing necc header elements -->
<img height="100%" src="BaseImages/MainHeader.png" width="100%" />
<div id="home1">
<!-- hyperlinks following -->
<a href="HomePage.html">
<img height="100%" src="BaseImages/1%20Home%20button.png" width="100%" />
</a>
</div>
<div id="about1">
<a href="AboutBriony.html">
<img height="100%"
src="BaseImages/2%20about%20briony%20button.png"
width="100%" />
</a>
</div>
<div id="information1">
<a href="Information.html">
<img height="100%"
src="BaseImages/3%20Information%20button.png"
width="100%" />
</a>
</div>
<div id="contact1">
<a href="ContactDetails.html">
<img height="100%"
src="BaseImages/4%20contact%20button.png"
width="100%" />
</a>
</div>
<div id="usefullinks1">
<a href="UsefulLinks.html">
<img height="100%"
src="BaseImages/usefullinks1.png"
width="100%" />
</a>
</div>
<!-- end hyperlinks -->
</div>
<!-- end #header -->
<div id="sidebar1">
<img height="30%"
src="BaseImages/label%201%20ceremonies.png"
width="100%" />
<div id="serieshyp">
<!--var of hyperlinks -->
<div id="hyp">
<a href="HomePage.html"
style="text-decoration:none">
Wedding Ceremonies
</a>
</div>
<div id="hyp">
<a href="SameSexWeddingCeremonies.html"
style="text-decoration:none">
Same-Sex Commitment Ceromonies
</a>
</div>
<div id="hyp">
<a href="RenewalofVows.html"
style="text-decoration:none">
Renewal of Vows
</a>
</div>
<div id="hyp">
<a href="CeremonyOptions.html"
style="text-decoration:none">
Ceremony Options
</a>
</div>
<div id="hyp2">
<a href="FrequentlyAskedQuestions.html"
style="text-decoration:none">
Frequently Asked Questions
</a>
<br />
</div>
</div>
<!-- hyp end-->
<img height="30%"
src="BaseImages/label%20extras%20and%20ideas.png"
width="100%" />
<!--uniform label -->
<div id="bolden">
Choosing the Right Celebrant
</div>
<div id="ptext">
When choosing your Celebrant, it’s not all about the money.
it will help if you consider the personality you are looking for, not just the fee.
Choosing a celebrant whose personal style fits in well with the type of ceremony you have in mind is far more important than finding the cheapest price.
The right celebrant can have a hugely positive impact on your wedding
and help make your day go smoothly and happily.
</div>
<div id="bolden">
Poetry
</div>
<div id="ptext">
I have a wide variety of poetry and readings for you to choose from
or you can use special verses which have special meaning to you both.
These can be seamlessly included in your marriage ceremony and often
are a real highlight.
You might like to consider having friends and family members
read one or two poems for you on the day, or I can do it for you.
It’s completely up to you.
<br />
<br />
<br /> <!--find sub for br breaks -->
<br />
<br />
<br />
</div>
<!-- end #sidebar1 -->
</div>
<div id="mainContent">
<div id="yourweddingcerelogo">
<img height="100%"
src="BaseImages/page%201%20label%20your%20wedding%20ceremony.png"
width="100%" />
</div>
<div id="band">
<!-- change according to page -->
<img height="100%"
src="BaseImages/ElongatedFlower3.png"
width="100%" />
</div>
<div id="contenttext">
<h1>
A Ceremony Designed Especially for You
</h1>
<p>
I believe that you should have exactly what you want on your special day.
</p>
<c>
I understand how much time and effort goes into planning your dream wedding,
so I workwith you to ensure your special day is exactly how you want it.
It means the world to me to help you find the perfect verse,
write the most meaningful vows and put together
a service you will remember for the rest of your lives.
<br />
</c>
<p>
You’re certain to have wonderful ideas and plans for how you would
like your wedding to be, from the cake and flowers, to the head-dresses
for the flower girls, everything has to be considered and plans put
into action to make it work. The Marriage Ceremony should also be considered
as a crucial element in your special day and it too needs
advance planning so that it goes exactly how you want it.
<br />
<br />
Together, we can design a ceremony that fits the style of your wedding
and is all about the two of you. It can be as long or short as you want it.
You can choose the content. Whether modern or traditional, your wedding ceremony
should be as unique as you are and together
we can make one that works perfectly for you both.
<br />
<br />
There are requirements that are integral to the solemnisation
and registration of a marriage and I will ensure that the process
runs smoothly and nothing is overlooked. I’m happy to
explain all of the requirements more fully at our first meeting.
</div>
<div id="secondlogo">
<!-- change according to page -->
<img height="100%"
src="BaseImages/label%20wedding%20client%20testimonials.png"
width="100%" />
</div>
<div id="secondarytext">
<!-- change according to page -->
<div id="second-pic">
<img height="100%"
src="BaseImages/testimonial%20pic%201.png"
width="100%" />
</div>
<div id="secondtext2">
<w>
Thank you so much for making our day so special.
The ceremony you planned for us was perfect!
It fit in with our theme and reflected our individuality perfectly.
</w>
</div>
<div id="nekcolpic">
<img src="BaseImages/testimonial pic 2.png"
alt=""
width="100%"
height="100%" />
</div>
<div id="nekcoltxt">
<w>
Hi Briony,
We can’t thank you enough for the time and
attention to detail you put into our wedding.
</w>
</div>
<div id="nekcolmaintxt">
<w>
Your professionalism was outstanding and helped make our wedding day
run smoothly with everything going off without a hitch.
Thank you for all the different options you gave us.
We ended up with exactly the service we wanted,
even though at the start we had no idea what that was!
</w>
</div>
<div id="secondtext3">
<w>
Thanks for all your time and patience and being there
for us all the way through the process.
It would not have been the same glorious wedding without you.
</w>
</div>
</div>
<!-- end #mainContent -->
</div>
<br class="clearfloat" />
<div id="footer">
<img height="100%"
src="BaseImages/footer.png"
width="100%" />
<!-- end #footer -->
</div>
<!-- end #container -->
</div>
</body>
</html>
图例:)非常感谢，是的，我讨厌不得不使用像素，但是当我使用百分比时，IE和Mozilla无法与它们一起计算:(干杯你修复它 –
如果这解决了你的问题，那么你应该接受这个通过点击勾号来回答。 – Richard