Html IE在图片后显示文本的方式存在缺陷

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 --> <

我的页面在Chrome和Firefox中运行良好,但在IE中解码效果不佳。我修复了大多数bug,但我有一个似乎可以解决的bug。当前显示的图片和都集中在它旁边;这张桌子摆放得很好。代码如下:

<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>&nbsp;</td>
                        <td><input id="firstName" name="firstName" type="text" style="width:180"/>
                    </tr>
                    <tr>
                        <td>Last Name<req>*</req>&nbsp;</td>
                        <td><input id="lastName" name="lastName" type="text" style="width:180"/>
                    </tr>
                    <tr>
                        <td>Email<req>*</req>&nbsp;</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>&nbsp;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 &copy; 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;
}