<br />がIEで動作していません

私のコードは、Firefox（TEXT2の上のTEXT1）とchromeでは必要に応じて完全に動作しますが、インターネットエクスプローラでは動作しません。ここに私のコードです。注：TEXT1 & TEXT2は元のコード内の他のhtml要素を置き換え、TEXTを使ってコードを単純化しました。ありがとうございました。<br />がIEで動作していません

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

出典

2011-12-09 katie

display: inline-block;

でclear: both;を交換しても、あなたはDOCTYPEを宣言したのですか？ doctypeは、使用しているHTMLのバージョンをブラウザーに知らせるので、ブラウザーはそれを正しくレンダリングできます。（<html>タグ上）ページの上部に

は入れ：

<!DOCTYPE html>

これは、HTML5のDOCTYPEを使用して、それはかなり柔軟なHTMLコードを可能にし、うまくいけば、正しくページの表示になるはずです。

HTML5では、さまざまな方法でマークアップを記述できます。
<br>は有効ですので、HTML5への新しいものが空のdivのためにあなたが実際にあなたのHTMLマークアップaswellを検証することができ<div id="emptyDiv" />または<div id="emptyDiv"></div>

を使用することができるということです<br />です。
The W3C Markup Validation Serviceは、コードやリンクをアップロードしてから検証を実行し、エラー/警告を出力する無料サービスです。警告の中には、特にHTMLを使った初心者のために少しわかりにくいものがありますが、いくつかの警告/エラーがあり、使用価値のあるブラウザがあれば、それを把握してHTMLを適切にレンダリングすることができますQuirksmodeと呼ばれています）。これらのバリデーターの中には、使用する必要があるものよりも少し複雑で複雑なものがありますので、最も好きなものを見つけてそれに固執する必要があります。

出典

2011-12-09 22:09:46

また、ここで示されているようにdoctypeを宣言してください。http://www.w3schools.com/tags/tag_doctype.asp –

ありがとう、そこに含まれていない唯一のものは新しい '<！doctype html>'ですが、それは良いことです参照。 –

私は<！DOCTYPE html>を宣言しましたので、他の何かになるはずです – katie

なぜTEXT1をTEXT2の上に表示したい場合は、にfloat:left;が表示されますか？私の問題のように見えます。それ以外の場合は、.line2にclear: both;などが適用されている必要があります。

出典

2011-12-09 22:16:40 JayC

<br />がIEで動作していません

答えて

関連する問題