Question

我的网页在Chrome和Firefox中运行良好，但在IE中解码不好。我修复了大多数错误，但我有一个我似乎可以解决的错误。目前显示图片，并且

在它旁边聚集在一起;表格显示正常。这是代码：

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

我希望我能让网站上线，以便你们可以看到但不幸的是它只是在本地主机上......问题在于图片和下面的文字。由于某种原因，显示图像，文本全部在左侧，而不是在自己的段落中。以下是该部分的CSS：

#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;
}

最后一个“contentRight”是侧栏另一侧（右侧）的div 所以基本上你的侧栏有一张图片和一个小形式，然后在右边有一个只有文字的部分

Answer 1

你在每行的第二个单元格上缺少td结束标记，并且在img标记上删除了align =“left”

请参阅http://jsfiddle.net/Y9yf8/1/

Answer 2

尝试将float: left分配给<img>代码，然后float: left; width: 100%;分配给<h2>代码......

证明：http://jsfiddle.net/Y9yf8/3/ =）

P.S。还是像黄教说的那样......

IE在图片后显示文字的方式的错误

2 个答案: