Html IE在图片后显示文本的方式存在缺陷
我的页面在Chrome和Firefox中运行良好,但在IE中解码效果不佳。我修复了大多数bug,但我有一个似乎可以解决的bug。当前显示的图片和都集中在它旁边;这张桌子摆放得很好。代码如下:Html IE在图片后显示文本的方式存在缺陷,html,css,Html,Css,我的页面在Chrome和Firefox中运行良好,但在IE中解码效果不佳。我修复了大多数bug,但我有一个似乎可以解决的bug。当前显示的图片和都集中在它旁边;这张桌子摆放得很好。代码如下: <div id="page"> <div id="slider"> <!-- Here is where the pictures for the slider go --> <
<div id="page">
<div id="slider">
<!-- Here is where the pictures for the slider go -->
<div id="PhotoSlider">
<ul class="bjqs">
<li><img src="images/test2.png"></img></li>
<li><img src="images/test1.png"></img></li>
</ul>
</div>
<!-- Java Script for the slider -->
<script>
$("#PhotoSlider").bjqs({
'height' : 286,
'width' : 1000,
'animationDuration' : 800,
'showMarkers' : true,
'useCaptions' : false,
'keyboardNav' : false,
'showControls' : false
});
</script>
</div>
<div id="content">
<div class="box">
<h1>Welcome!</h1><br/>
<p></p>
<p></p>
</div>
</div>
<div id="contentRight">
<p></p>
<p></p>
</div>
<!-- This is the newsletter form -->
<div id="sidebar">
<img align="left" src="images/kidsSmiling1.png"></img><br>
<h2>Newsletter</h2>
<p>Sign up to receive the lastest news and special offers</p>
<table>
<tr>
<td>First Name<req>*</req> </td>
<td><input id="firstName" name="firstName" type="text" style="width:180"/>
</tr>
<tr>
<td>Last Name<req>*</req> </td>
<td><input id="lastName" name="lastName" type="text" style="width:180"/>
</tr>
<tr>
<td>Email<req>*</req> </td>
<td><input id="email" name="email" type="text" style="width:180"/>
</tr>
</table>
<p align="middle"><input align="middle" type="submit" value="Submit" onclick="save()" style="width:65"></P>
<p><req>*</req> Required fields</p>
</div>
<br class="clearfix" />
<!-- Social media div -->
<div id="media">
<img align="right" src="images/facebookLogo.png"></img> <img align="right" src="images/twitterLogo.png"></img>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
Copyright © 2012 Kaysville Dental | <a href="mailto:ToothDocPaul@msn.com?Subject=Customer Inquiry">Email Us</a> | Phone:(800) 376-2241 | 690 Main Street. Kaysville, Utah
</div>
最后一个“contentRight”是位于侧边栏另一侧(右侧)的div
因此,基本上你有一个侧栏,下面有一张图片和一个小表单,然后在右边有一个只包含文本的部分你在每行的第二个单元格上缺少td结束标记,并且在img标记上去掉align=“left”
请参见尝试将
float:left
分配给
标记,然后float:left;宽度:100%代码>到
标记
证明:=)
另外,还是照黄思明说的做…呵呵,我觉得你用关闭img标签很幽默,但是br只是
无论如何,我把你的代码放在一把小提琴里,一些随机图像表是用于数据的,而不是表单或布局。改用标签和无序列表。请更清楚地解释到底是什么发生的?我认为Internet Explorer可能正在发生。不,它们更像是拐杖。
#sidebar {
background: white;
padding: 0px 5px 0px 50px;
margin-left: 0;
border-right: 1px solid #C0C0C0 ;
float: left;
width: 312px;
}
#sidebar p {
font-size: 12px;
margin-bottom: 0.5em
}
#sidebar img{
margin-bottom: 1.5em;
}
#sidebar req {
font-size: 12px;
color: red;
}
#sidebar td{
padding: 0px 0px 10px 0px;
font-size: 14px;
}
#sidebar h2{
text-transform: uppercase;
}
#contentRight {
background: white;
padding: 0px 50px 0px 0px;
float: right;
width: 550px;
}