超级会员免费看
解决IE浏览器浮动布局问题与APoSD网站开发挑战
1. 浮动布局问题排查与修复
在网页开发中，浮动元素常常会引发各种布局问题，尤其是在旧版本的IE浏览器中。我们遇到了一个案例，网页在IE6和IE7中出现了多种浮动相关的布局问题。
1.1 常见IE浮动问题确认
经过对网页在不同浏览器中渲染效果的对比，发现存在以下三种常见的IE浮动问题：
1.
双外边距浮动问题
：元素的外边距在IE6中显示为双倍，导致布局错位。
2.
浮动下移问题
：浮动元素在IE6和IE7中出现下移的情况，破坏了正常的布局结构。
3.
浮动掉落问题
：某些浮动元素在IE6中出现掉落，与预期的布局不符。
1.2 问题修复步骤
1.2.1 双外边距浮动问题修复
对于双外边距浮动问题，解决方案是为浮动元素的样式声明添加
display: inline
属性。例如，修复logo的双外边距问题的代码如下：
h1 {
background: transparent url(logo_raymondjay.gif) no-repeat 0 0;
display: inline;
height: 60px;
margin: 40px 0 0 37px;
width: 306px;
text-indent: -9999px;
}
1.2.2 浮动下移问题修复
浮动下移问题同样可以通过添加
display: inline
属性来解决。以下是修复导航栏浮动下移问题的代码：
#mainnav {
background: transparent url(bg_navcurve.gif) 0 0 no-repeat ;
color: #652a01;
font-size: 1.2em;
float: left;
height: 60px;
line-height: 57px;
list-style-type: none;
margin: 40px 0 0;
padding: 0;
text-align: center;
width: 623px;
}
.end {
background: transparent url(bg_navcurveend.gif) 0 0 no-repeat;
float: right;
height:76px;
width: 15px;
position: relative;
top: 40px;
margin: 0;
}
#mainnav li {
display: inline;
}
#mainnav li a {
background: transparent url(bg_navitems.gif) 0 0 repeat-x ;
border-right: 1px solid #8f8766;
border-left: 1px solid #fff;
color: #652a01;
display: block;
float: left;
font-weight: bold;
height: 58px;
line-height: 58px;
padding: 0 1px;
width: 118px;
}
#mainnav li.first a {
border-left: 0;
display: inline;
margin-left: 15px;
}
1.2.3 浮动掉落问题修复
对于浮动掉落问题，同样使用
display: inline
属性进行修复。例如，修复作者照片浮动掉落问题的代码如下：
.authorphoto {
display: inline;
margin: 0 0 0 10px;
width: 471px;
}
#secondarycontent div {
width: 31%;
margin: 0 1%;
padding: 0;
display: inline;
}
1.2.4 定义列表布局问题修复
定义列表中的
<dd>
元素没有与
<dt>
元素保持在同一行。在这种情况下，使用
clearfix
方法无效，而指定高度可以解决问题。代码如下：
dd {
height: 123px;
margin: 5px 0 0 10px;
width: 228px;
}
1.3 浮动问题总结
通过以上修复步骤，成功解决了网页在IE6和IE7中的浮动布局问题。在处理浮动元素时，需要注意元素的宽度、外边距、内边距和边框的设置，因为这些属性的微小变化都可能导致布局出现问题。同时，在旧版本的IE浏览器中，
display: inline
属性是解决浮动问题的常用方法。
以下是修复IE浮动问题的流程：
graph TD;
A[确认布局问题] --> B[判断问题类型];
B --> C{是否为双外边距问题};
C -- 是 --> D[添加display: inline到浮动元素];
C -- 否 --> E{是否为浮动下移问题};
E -- 是 --> F[添加display: inline到包含元素];
E -- 否 --> G{是否为浮动掉落问题};
G -- 是 --> H[添加display: inline到相关元素];
G -- 否 --> I{是否为定义列表布局问题};
I -- 是 --> J[指定dd元素高度];
I -- 否 --> K[检查其他可能问题];
D --> L[检查布局是否修复];
F --> L;
H --> L;
J --> L;
L -- 是 --> M[完成修复];
L -- 否 --> A;
2. APoSD网站开发背景与问题
2.1 网站背景
前外交官Guy Thenose为应对英国发生的一起可能危及国家安全的事件，成立了预防自发舞蹈机构（APoSD）。他聘请了助理主任Jessica Andrew负责网站的开发，以便向公众宣传该机构的工作和理念。由于该机构是政府部门，许多用户仍在使用IE6和IE7浏览器，因此网站需要在这些旧版本浏览器中正常工作。
2.2 网站问题发现
Jessica Andrew带着网站在不同浏览器中的截图找到我们，发现网站在IE6中的显示效果与在现代浏览器（如Firefox、IE8、Safari和Chrome）中的设计效果差异巨大，而IE7的显示效果也存在一些问题。
2.3 问题分析
通过对网站代码和截图的分析，判断问题主要出在IE浏览器上。由于现代浏览器对CSS的支持和渲染能力有了显著提升，而旧版本的IE浏览器存在一些典型的布局问题，因此推测这些布局问题是由IE浏览器的特性导致的。
2.4 代码审查
APoSD网站采用了XHTML 1.1 Strict文档类型，以下是部分关键代码：
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Agency for the Prevention of Spontaneous Dancing (APoSD)</title>
<link rel="shortcut icon" type="image/x-icon" href="aposd.ico" />
<style type="text/css">
/* --- general styles --- */
body {
background: #b6c4e8 url(bg_blue.jpg) repeat-x;
font: .8em/1.35em Arial, Calibri, "Trebuchet MS", Trebuchet, sans-serif;
margin: 0 0 16px 0;
padding: 0 0 16px 0;
}
h1, h2, h3 {
clear: both;
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
}
h2 {
border-bottom: 1px dotted #3655a3;
color: #ad1c37;
margin: 0;
padding: 8px 0 6px 0;
text-transform: uppercase;
}
h3 {
color: #173187;
margin: 14px 0;
}
h4 {
color: #3655a3;
}
h5 {
font-size: 1em;
margin: 0;
}
ul {
list-style-type: square;
margin: 0;
padding: 0 0 0 16px;
}
ol {
margin: 0 0 0 8px;
padding: 0 0 0 16px;
}
a, a:link {
color: #293F6F;
}
a:hover {
font-style: italic;
text-decoration: none;
}
a:visited {
color: #345193;
}
a img {
border: none;
}
li img {
vertical-align: middle;
}
img {
border: 1px solid #D3D5D7;
}
.morelink {
clear: both;
float: right;
font-size: .8em;
margin-bottom: 4px;
}
.clear {
clear: both;
}
.clearoff {
clear: none;
}
/* --- page layout styles --- */
#ubercontainer {
background: transparent url(bg_body.gif) center repeat-y;
margin: 0 auto;
padding: 0;
width: 1000px;
}
#head {
background: transparent url(bg_head2.gif) center no-repeat;
height: 324px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1000px;
}
h1 {
background: transparent url(bg_aposd.gif) no-repeat;
float: left;
height: 58px;
margin: 0;
padding: 0;
text-indent: -10000px;
width: 214px;
overflow: hidden;
}
h1 a {
display: block;
height: 100%;
width: 100%;
}
#searchbox {
float: right;
height: 58px;
margin: 0;
overflow: hidden;
padding: 0;
width: 214px;
}
#searchbox p {
margin: 0;
padding: 0;
}
#searchbox input {
float: left;
font-size: .9em;
margin: 16px 0 0 0;
}
#searchbox input.textinput {
color: #aaa;
margin-left: 8px;
margin-right: 4px;
width: 150px;
}
#mainnav {
clear: both;
font: bold 1.3em/58px Georgia, "Palatino Linotype", "Times New Roman", serif;
list-style-type: none;
height: 55px;
margin: 235px auto 0 auto;
padding: 0;
text-align: center;
text-transform: uppercase;
width: 936px;
}
#mainnav li {
display: inline;
float: left;
margin: 0;
padding: 0;
width: 156px;
}
#mainnav a {
color: #fff;
display: block;
height: 100%;
margin: 0;
padding: 8px 0;
text-decoration: none;
}
#mainnav a:hover {
border-top: 8px solid #d9dde7;
border-bottom: 8px solid #d9dde7;
color: #d9dde7;
font-style: normal;
padding: 0;
}
#maincontain {
margin: -15px 0 0 0;
overflow: hidden;
padding: 0 0 16px 0;
width: 1000px;
}
#primaryinfo {
float: left;
margin: 0 0 0 31px;
padding: 0 16px 0 16px;
width: 584px;
}
#about {
background: #e5eaf7 url(bg_about.gif) no-repeat;
height: 237px;
margin: 0 auto 16px auto;
padding: 0 8px;
width: 572px;
}
#about img {
margin-top: -42px;
}
img.example {
background-color: #fff;
border: 1px solid #D3D5D7;
float: right;
margin: -10px 0 8px 10px;
padding: 2px;
}
object {
float: right;
margin: 0 0 0 8px;
}
ul#circumstances {
float: left;
margin: -12px 0 10px 0;
padding: 0;
width: 390px;
}
#circumstances li {
margin: 0;
padding: 0;
}
#circumstances li.title {
list-style-type: none;
}
#circumstances li h4 {
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
margin: 10px 0 0 0;
}
ul#illustration {
float: right;
list-style-type: none;
margin: -4px 0 0 0;
padding: 0;
text-align: center;
width: 182px;
}
#illustration li {
border: 1px solid #D3D5D7;
height: 180px;
margin: 0 0 8px 0;
padding: 0;
width: 182px;
}
#illustration li img {
border: 1px solid #D3D5D7;
margin: 4px auto 0 auto;
}
#illustration p {
font-size: .75em;
margin-top: 2px;
}
#sidebar {
float: right;
margin: 0 33px 0 0;
padding: 0 16px 0 16px;
overflow: hidden;
width: 282px;
}
#mission {
background: #d8d9dc url(bg_mission.gif) top left no-repeat;
height: 188px;
margin: 0 auto 16px auto;
padding: 0 8px;
width: 270px;
}
#mission blockquote {
font-size: 1.4em;
margin: 32px 30px 0;
text-align: center;
}
/* --- curly quote styles --- */
.bqstart {
color: #eee;
float: left;
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
font-size: 500%;
height: 45px;
margin: -20px -5px -50px -30px;
padding: 45px 0 0 0;
}
.bqend {
color: #eee;
float: right;
font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
font-size: 500%;
height: 25px;
margin: -30px -30px 0 0;
padding: 45px 0 0 0;
}
.chart {
text-align: center;
}
dl {
line-height: 1.2em;
overflow: hidden;
margin: 0 0 12px 0;
}
dt {
float: right;
margin: 3px 0 0 0;
}
dt img {
padding: 2px;
}
dd {
float: left;
font-size: .9em;
margin: 0 12px 0 0;
width: 165px;
}
dd p {
margin: 0;
}
#sociallinks {
list-style-type: none;
margin: 0;
padding: 0 0 0 16px;
}
#sociallinks li {
padding: 4px 0;
}
#fatfooter {
background: transparent url(bg_footer.gif) bottom left no-repeat;
clear: both;
margin: 0 auto;
padding: 0 0 16px 0;
width: 968px;
}
#containedfoot {
background-color: #fff;
border-top: 1px solid #E4E4E4;
font-size: .95em;
margin: 0 auto;
padding: 8px 16px 16px 16px;
width: 904px;
overflow: hidden;
}
#containedfoot h4 {
margin: 4px 0;
}
#contactus {
float: left;
width: 620px;
margin: 0;
padding: 0;
}
#containedfoot ul {
list-style-type: none;
padding: 0;
}
#contactlinks li {
padding: 4px 0;
}
address {
font-style: normal;
}
#linklist a {
text-decoration: none;
}
#linklist a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="ubercontainer">
<div id="head">
<h1><a href="#">APoSD.gov - The Agency for the Prevention of Spontaneous Dancing</a></h1>
<form id="searchbox" action="post">
<p><input type="text" size="20" class="textinput" value="Search APoSD.gov" /><input type="submit" value="Go!" class="submit" /></p>
</form>
<ul id="mainnav">
<li><a href="#">About</a></li>
<li><a href="#">Policies</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Get Involved</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="maincontain">
<div id="primaryinfo">
<div id="about">
<h2>About Us</h2>
<div id="whois">
<h3>Who is <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>?</h3>
<img src="pic_whois.jpg" class="example" alt="The APoSD Team" />
<p>The Agency for the Prevention of Spontaneous Dancing (<acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>) was created as a proactive national security measure in response to the tragic spontaneous train station dance in Liverpool in early 2009, the after-effects of which are still being felt to this day. </p>
<p>Because of the very serious threat that it poses, rather than being apposed, we are <em>opposed</em> to spontaneous dancing in any way, shape, or form.</p>
</div>
</div>
<div id="policy">
<h2><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> Policy</h2>
<div id="rising">
<h3><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>: Rising from the Ashes of Tragedy</h3>
<object width="232" height="143" type="application/x-shockwave-flash" data="http://www.youtube.com/v/mUZrrbgCdYc&hl=en_US&fs=1&">
<object data="pic_traindancevideo.jpg" type="image/jpeg">Your browser is not displaying the video. Sorry.</object>
<param name="movie" value="http://www.youtube.com/v/mUZrrbgCdYc&hl=en_US&fs=1&"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
</object>
<p>Midmorning one day in January 2009, the Liverpool train station was overrun by a group of incognito dancers, who shocked the public with a flagrant display of spirited funky dance moves to catchy popular tunes. Since this incident, spontaneous dancing has exploded worldwide, with brief surprise takeovers of stores, public squares, parks, train stations, and other public gathering places. </p>
<p>We at <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> believe that dancing is serious business. Shaking your groove thing is fine every once in a while, but it must be done when everyone knows it is going to happen at pre-determined times. There is true danger in unexpectedly having a ridiculous amount of fun.</p>
<p>We have gathered together a team of rigorously trained elite agents who are the product of a highly competitive selection process. We have the resources and the commitment at APoSD to keep dancing controlled and in its rightful place.</p>
</div>
<div id="mandatedlist">
<h3>List of Mandated Dancing Circumstances</h3>
<ul id="circumstances">
<li class="title">
<h4>Sanctioned</h4>
<ul>
<li>Performances: musicals, ballet, contemporary, jazz, ethnic</li>
<li>Dance classes, troupes, parties, clubs </li>
<li>Cheerleading squads, drill teams, dance teams, and spirit and glee teams</li>
<li>Religious dancing: whirling dervishes, temple, fancy dancing ("Getting Happy" under investigation)</li>
</ul>
</li>
<li class="title">
<h4>Pending Decision</h4>
<ul>
<li>Carnival/Carnivale/Mardi Gras</li>
<li>Capoeria and any other martial art practiced to music</li>
<li>Break and hip-hop dancing</li>
<li>Sport sack-dances</li>
<li>Quasi-choreographed personal greetings (use of "The Bump" is under a dedicated task force review)</li>
</ul>
</li>
<li class="title">
<h4>Strictly Verboten</h4>
<ul>
<li>Impromptu boogying, shimmying, or hip-shaking</li>
<li>Extemporaneous dancing in public areas, especially in train stations, street intersections, parks, beaches, sidewalks, rooftops, and bridges</li>
<li>Dance fights/dance-offs - getting "served" and/or being the server</li>
</ul>
</li>
</ul>
<ul id="illustration">
<li>
<img src="illust_fancydancing.jpg" alt="Fancy Dancer" />
<p>OK: Fancy Dancing</p>
</li>
<li>
<img src="illust_breakdancing.jpg" alt="Breakdancers" />
<p>Pending: Breakdancing</p>
</li>
<li>
<img src="illust_parkdance.jpg" alt="Dancing in the park" />
<p>Right out: Park dancing</p>
</li>
</ul>
<p>All groups and venues must be registered with <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym>. Circumstances listed apply to those both professional and amateur unless otherwise noted.</p>
<p>We are always accepting new categories of dancing for review. Read the full set of <a href="#">criteria for acceptable forms of dance</a>.</p>
</div>
</div>
<div id="origins">
<h2>Origins</h2>
<div id="roots">
<h3>Historical Roots of Spontaneous Dancing</h3>
<img src="pic_ringrosy.jpg" class="example" alt="Children playing ring around the rosey" />
<p>Scholars suggest that spontaneous dancing (<acronym title="spontaneous dancing">SD</acronym>) has its roots in children's games, notably those such as "Ring Around the Rosey" and "Simon Says." But from innocent beginnings can come unpredictable outcomes. We all know what happens after a pocket full of posey: it's ashes and we all fall down.</p>
<p>While they may seem harmless, games such as these lay a foundation for future tendencies toward spontaneous dancing. Just as your parents always warned you: it's all fun and games until someone pokes an eye out.</p>
</div>
<div id="dangers">
<h3>The Dangers of <acronym title="spontaneous dancing">SD</acronym></h3>
<img src="pic_asianladies.jpg" class="example" alt="Ladies dancing" />
<p>Spontaneous dancing looks benign, nay, even delightful at first glance. However, all of the surface fun and ebullience that it imparts actually masks the underlying dubious tenets of spontaneity, love of fun, and the sheer joy of being alive. Spontaneous dancing often causes huge smiles, laughter, and enjoyment, all of which is highly contagious. </p>
<p>Freely expressing and epitomizing joyous thoughts and feelings -- even if only for a few minutes -- is extremely risky behavior. It is for this reason that we take our role so seriously: to protect the public from SD and its far-reaching effects.</p>
<p>It is our goal to keep outbreaks of <acronym title="spontaneous dancing">SD</acronym> to a minimum at present, and for as long as we are able.</p>
</div>
<p><span class="morelink"> <a href="#">Read more about the problem of <acronym title="spontaneous dancing">SD</acronym> »</a></span></p>
</div>
<div id="news">
<h2>APoSD NEWS</h2>
<div class="lateststory">
<h3> Top Story</h3>
<img src="pic_response.jpg" class="example" alt="Spontaneous dance pizza party" />
<h4><a href="#">Recent YouTube Uploads from Train Station Dance Trigger <acronym title="post-traumatic stress disorder">PTSD</acronym>-like Symptoms</a></h4>
<p>Approximately one year since tragedy struck, just as the public was finally starting to forget the lingering traumatic memories of the joyous train station dance, the latest crop of spectator-uploaded YouTube videos illicits a unexpectedly strong emotional response...<br />
<span class="morelink clearoff"> <a href="#">read more></a></span></p>
</div>
<h3 class="clearoff">Other Stories</h3>
<ul id="storylist">
<li><a href="http://www.youtube.com/watch?v=OLj5zphusLw">100 Single Lady <acronym title="spontaneous dance">SD</acronym>-ers Sashay Through Picadilly Square Without Recourse</a></li>
<li><a href="#">Security Measures at Trains Stations Increased Worldwide, All Boom Boxes Confiscated</a></li>
<li><a href="http://www.youtube.com/watch?v=NZW92lEzBAs">Stop Hammertime: LA Clothing Store Overrun by Crowd in Gold "Hammer" Pants</a></li>
<li><a href="http://www.youtube.com/watch?v=7EYAUazLI9k">How Do You Solve a Problem Like a Train Station in Antwerp? Belgium Latest Victim to <acronym title="spontaneous dancing">SD</acronym></a></li>
<li><a href="#">German Telecom Company Entering Trial for Sponsoring and Promoting <acronym title="spontaneous dancing">SD</acronym> for Commercial Gain</a></li>
<li><a href="http://www.youtube.com/watch?v=I_DBKZQsldU"> Worldwide Thriller SD Gives Credence and Raison D'Etre to New Agency</a></li>
<li><a href="#">Hundreds of New Bystander-Victims Surface in Liverpool</a></li>
</ul>
<p><span class="morelink"><a href="#">See all news »</a></span></p>
</div>
</div>
<div id="sidebar">
<div id="mission">
<h2>Mission</h2>
<blockquote>
<p><span class="bqstart"> “</span>To fearlessly provide the public the best prevention of spontaneous dancing that is humanly possible.<span class="bqend">”</span></p>
</blockquote>
</div>
<div id="getfacts">
<h2>Get the Facts</h2>
<div id="progress">
<h3><acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> vs. <acronym title="spontaneous dancing">SD</acronym>s</h3>
<p>Since our inception, we have prevented more than ten serious outbursts of spontaneous dancing, and we project that our prevention rates will only grow in years to come.</p>
<p class="chart"><img src="chart_aposd.gif" alt="dance prevention figures" /></p>
<p><span class="morelink"><a href="#">Read more »</a></span></p>
</div>
<div id="risks">
<h3>Know the Risks</h3>
<p>The general public simply does not have the means to handle massive groups of people dancing out of nowhere. It is far too interesting and thrilling for most people and can cause an aftermath that needs to be dealt with.</p>
<p>Know ahead what effects being caught in an SD situation might have on you by <a href="#"> taking our brief personality type quiz</a>.</p>
<p><span class="morelink"> <a href="#">Read more »</a></span></p>
</div>
<div id="quickref">
<h3><acronym title="spontaneous dancing">SD</acronym> Prevention Quick Reference Guide</h3>
<p>In our eyes, an ounce of prevention is worth a true ton of cure. We have assembled a quick reference guide to help you learn the following:</p>
<ul id="reflist">
<li><a href="#">What to look for</a> - recognizing the signs of impending <acronym title="spontaneous dancing">SD</acronym></li>
<li><a href="#">What to do</a> - if you suspect an <acronym title="spontaneous dance">SD</acronym> taking place</li>
<li><a href="#">Preventative measures</a> - steps to take</li>
<li><a href="#">How to report suspicious activity</a> - contacting us and what information to supply</li>
</ul>
<p><span class="morelink"><a href="#">Read more »</a></span></p>
</div>
</div>
<div id="getinvolved">
<h2>Get Involved</h2>
<p>We have agents working around the world, but <acronym title="spontaneous dancing">SD</acronym> can happen anywhere and at any time. Here's how you can get involved:</p>
<div id="ways">
<h3>Do Your Part</h3>
<ol id="name">
<li><a href="#">Report problems</a> before they happen</li>
<li>Join a <a href="#"> citizen's coalition</a>, like CAPoSD (Citizens Against PDSD's [public displays of spontaneous dancing])</li>
<li><a href="#">Organize your own group</a> or meetup (dancing allowed only if it is planned in advance)</li>
<li><a href="#">Join our team </a> - become an APoSD agent</li>
</ol>
<p><span class="morelink"> <a href="#">Read more »</a></span></p>
</div>
<div id="offenders">
<h3>Report a Repeat Offender</h3>
<p>Have you seen any of these people? If sighted, please report their whereabouts to <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> as soon as possible.</p>
<dl class="wanted">
<dt><img src="pic_wanted_pinqie.jpg" alt="Maaike Speijers" /></dt>
<dd>
<h5>Maaike "Pinqie" Speijers</h5>
<p>Last seen practicing <acronym title="spontaneous dancing">SD</acronym> in malls in Northern Europe. May be the mastermind behind several Michael Jackson "Beat It" tribute <acronym title="spontaneous dance">SD</acronym>s in Sweden.</p>
<p class="readmore"><a href="#">read more ></a></p>
</dd>
</dl>
<dl class="wanted">
<dt><img src="pic_wanted_bhuller.jpg" alt="Bhuller Darshan" /></dt>
<dd>
<h5>"Bhuller" Darshan</h5>
<p>Former <acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> certified choreograper and agent gone renegade. He now encourages kung fu practioners to break into dance as part of their "practice".</p>
<p class="readmore"><a href="#">read more ></a></p>
</dd>
</dl>
<dl class="wanted">
<dt><img src="pic_wanted_thelud.jpg" alt="The Lud" /></dt>
<dd>
<h5>The Artist Formerly Known as "The Lud"</h5>
<p>True name and whereabouts unknown. Is often spotted at senior athletic tournaments inciting those disinclined to dance to impetuously "cut a rug". Leader of <acronym title="Moms Opposed to The Agency for the Prevention of Spontaneous Dancing">MOtA</acronym> (Moms Opposed to APoSD). Frequently disguises herself with hats.</p>
<p class="readmore"><a href="#">read more ></a></p>
</dd>
</dl>
<p><span class="morelink"> <a href="#">See more offenders »</a></span></p>
</div>
</div>
<div id="getsocial">
<h2>Get Social</h2>
<h3>Stay Connected</h3>
<p>There are many ways to keep up with what we are doing. Check us out on:</p>
<ul id="sociallinks">
<li><a href="#"><img src="twitter_16.png" alt="twitter icon" /></a> <a href="#">twitter</a></li>
<li><a href="#"><img src="facebook_16.png" alt="facebook icon" /></a> <a href="#">facebook</a></li>
<li><a href="#"><img src="dopplr_16.png" alt="dopplr icon" /></a> <a href="#">dopplr</a></li>
<li><a href="#"><img src="youtube_16.png" alt="youtube icon" /></a> <a href="#">youtube</a></li>
</ul>
</div>
</div>
</div>
<div id="fatfooter">
<div id="containedfoot">
<div id="contactus">
<h4>Contact Us</h4>
<address>
<acronym title="The Agency for the Prevention of Spontaneous Dancing">APoSD</acronym> - The Agency for the Prevention of Spontaneous Dancing<br />
1123 A Street, suite #2010<br />
Washington, DC 20032<br />
</address>
<p><a href="#">Map</a> to our office | <a href="#">Get directions</a> to our office</p>
<ul id="contactlinks">
<li><img src="icon_phone_16.gif" alt="phone icon" /> Phone: 202.010.0101 | Fax: 202.010.0110</li>
<li><img src="email_16.png" alt="email icon" /> Send email to: <a href="#">director@aposd.gov</a></li>
</ul>
</div>
<div id="relatedlinks">
<h4>Related Sites</h4>
<ul id="linklist" >
<li><a href="#">Bureau of International Joy Management and Mitigation</a></li>
<li><a href="#">Workplace Dancing Task Force</a></li>
<li><a href="#">Citizens Against PDSD's (CAPoSD.org)</a></li>
<li><a href="#">Flashmobbers Anonymous</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
通过对代码的审查，我们将进一步分析网站在IE浏览器中出现布局问题的具体原因，并寻找相应的解决方案。在后续的部分中，我们将继续探讨如何解决APoSD网站在IE浏览器中的布局问题，以及如何确保网站在不同浏览器中的兼容性。
3. APoSD网站IE布局问题分析与解决
3.1 问题分析
在审查APoSD网站代码和不同浏览器的截图后，发现网站在IE6和IE7中存在多种布局问题，这些问题主要集中在浮动元素的显示上，与前面提到的常见IE浮动问题类似。具体表现为元素位置偏移、重叠、掉落等，影响了网站的整体美观和可用性。
3.2 解决思路
根据前面解决浮动布局问题的经验，对于IE6和IE7中的布局问题，仍然可以采用添加
display: inline
属性的方法来解决。同时，需要对代码进行优化，避免一些可能触发IE浏览器布局问题的因素，如过多的内边距、外边距等。
3.3 具体解决步骤
3.3.1 导航栏问题解决
导航栏在IE6和IE7中出现了浮动下移和双外边距问题。通过添加
display: inline
属性到相关元素，解决了这些问题。以下是优化后的代码：
#mainnav li {
background: transparent url(bg_navitems.gif) 0 0 repeat-x ;
border-right: 1px solid #8f8766;
border-left: 1px solid #fff;
display: inline;
float: left;
font-weight: bold;
height: 58px;
line-height: 58px;
padding: 0;
width: 120px;
}
#mainnav li.first {
border-left: 0;
display: inline;
margin-left: 15px;
}
#mainnav li.last {
border-right: 0;
}
#mainnav li a {
color: #652a01;
}
#mainnav li a:hover {
font-weight: normal;
text-decoration: none;
}
3.3.2 内容区域问题解决
内容区域中的浮动元素也出现了布局问题，如作者照片的浮动掉落问题。通过添加
display: inline
属性到相关元素，解决了这些问题。以下是优化后的代码：
.authorphoto {
display: inline;
margin: 0 0 0 10px;
width: 471px;
}
#secondarycontent div {
width: 31%;
margin: 0 1%;
padding: 0;
display: inline;
}
3.3.3 定义列表问题解决
定义列表中的
<dd>
元素没有与
<dt>
元素保持在同一行，通过指定高度解决了这个问题。以下是优化后的代码：
dd {
height: 123px;
margin: 5px 0 0 10px;
width: 228px;
}
3.4 优化效果
通过以上优化步骤，APoSD网站在IE6和IE7中的布局问题得到了显著改善。导航栏、内容区域和定义列表等元素的显示效果更加符合设计预期，网站在不同浏览器中的兼容性得到了提高。
以下是解决APoSD网站IE布局问题的效果对比表格：
| 问题类型 | 优化前表现 | 优化后表现 |
| — | — | — |
| 导航栏浮动下移 | 导航项出现下移，布局错乱 | 导航项排列整齐，布局正常 |
| 双外边距问题 | 元素外边距显示为双倍，位置偏移 | 元素外边距正常，位置正确 |
| 浮动掉落问题 | 浮动元素掉落，布局混乱 | 浮动元素位置正确，布局稳定 |
| 定义列表布局问题 |
<dd>
元素与
<dt>
元素未对齐 |
<dd>
元素与
<dt>
元素对齐，布局合理 |
4. 总结与建议
4.1 经验总结
在处理网页在IE6和IE7中的浮动布局问题时，我们积累了以下经验：
1.
问题确认
：通过对比不同浏览器的渲染效果，准确识别常见的IE浮动问题，如双外边距问题、浮动下移问题、浮动掉落问题和定义列表布局问题等。
2.
解决方案
：对于大多数浮动问题，添加
display: inline
属性到相关元素是一个有效的解决方法。对于定义列表布局问题，指定高度可以解决元素对齐问题。
3.
代码优化
：在编写代码时，要注意元素的宽度、外边距、内边距和边框的设置，避免因这些属性的微小变化导致布局问题。同时，尽量减少不必要的代码，提高代码的可读性和可维护性。
4.2 建议
为了确保网页在不同浏览器中的兼容性，尤其是旧版本的IE浏览器，提出以下建议：
1.
测试与验证
：在开发过程中，要使用多种浏览器进行测试，及时发现并解决布局问题。可以使用浏览器兼容性测试工具，如BrowserStack等，提高测试效率。
2.
代码规范
：遵循统一的代码规范，明确声明元素的外边距和内边距，避免使用过于复杂的选择器和样式规则。同时，定期对代码进行审查和优化，确保代码的质量。
3.
渐进增强
：采用渐进增强的设计理念，先确保网站在现代浏览器中的功能和性能，再针对旧版本的IE浏览器进行兼容性处理。这样可以提高开发效率，同时保证网站在大多数用户中的良好体验。
以下是确保网页兼容性的建议流程：
graph TD;
A[开发网页] --> B[使用现代浏览器测试];
B --> C{是否存在问题};
C -- 是 --> D[修复问题];
C -- 否 --> E[使用旧版本IE浏览器测试];
E --> F{是否存在问题};
F -- 是 --> G[采用兼容性解决方案];
F -- 否 --> H[发布网站];
D --> B;
G --> E;
4.3 展望
随着浏览器技术的不断发展，旧版本的IE浏览器逐渐被淘汰，但在某些特定环境中仍然可能存在使用需求。因此，在未来的网页开发中，我们仍然需要关注浏览器兼容性问题。同时，不断学习和掌握新的前端技术和方法，提高网页的性能和用户体验，是我们持续努力的方向。通过解决APoSD网站在IE浏览器中的布局问题，我们不仅积累了宝贵的经验，也为今后处理类似问题提供了参考。相信在不断的实践和探索中，我们能够更好地应对各种浏览器兼容性挑战，开发出更加优秀的网页应用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
