Question

我的代码在firefox（TEXT2顶部的TEXT1）和chrome上完美地工作，但在Internet Explorer中没有。这是我的代码。注意TEXT1＆amp; TEXT2替换了原始代码中的其他html元素，只是使用TEXT来简化代码。谢谢。

    <div style="float:left;">
     <span class="line-1">
      TEXT1
     </span><br />
     <span class="line-2">
     TEXT2
     </span>
     </div>

CSS

    .line-1{
    margin:3px; 
    padding:5px;    
    background:#F0F2F5; 
    float:left;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
    border-radius:3px;
    border-left:solid #B6BBC3 1px;
    border-right:solid #B6BBC3 1px;
    border-top:solid #B6BBC3 1px;
    border-bottom:solid #B6BBC3 1px;
    width:220px;
   -moz-box-shadow: 0px 4px 1px #F0F2F5;
   -webkit-box-shadow: 0px 4px 1px #F0F2F5;
    box-shadow: 0px 4px 1px #F0F2F5;}

    .line-2{
     color:#808080;
     font-size:11px;}

Answer 1

将clear: both;替换为display: inline-block;

另外，您是否声明了 doctype ？ doctype告诉浏览器您正在使用的HTML版本，以便浏览器可以正确呈现它。

在页面顶部（<html>标记上方）放置：

<!DOCTYPE html>

这使用HTML5 doctype，它允许非常灵活的HTML代码，并且希望能够正确显示您的页面。

在HTML5中，您可以通过多种不同的方式编写标记 <br>是有效的，<br /> HTML5的新内容是，对于空div，您实际上可以使用<div id="emptyDiv" />或<div id="emptyDiv"></div>

您也可以验证HTML标记。
The W3C Markup Validation Service 是一项免费服务，可让您上传代码或链接到该代码，然后对其进行验证并打印错误/警告。一些警告有点神秘，特别是对于有HTML的初学者，但如果你有一些警告/错误，任何浏览器都值得使用将会“弄明白”并正确渲染HTML（不是世界末日）。它被称为Quirksmode）。其中一些验证器比它们应该使用的更复杂/更复杂，所以你必须找到你最喜欢的那个并坚持下去。

Answer 2

如果您希望TEXT2位于TEXT2之上，.line1为什么会有float:left;？对我来说似乎是一个问题。否则，.line2需要应用clear: both;或其他内容。

<br/>不在I.E工作

2 个答案: