不能得到浮球左/右爲一個div在Internet Explorer中工作

下面是HTML：不能得到浮球左/右爲一個div在Internet Explorer中工作

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <title></title> 
    </head> 
    <body> 
    <div align="center"> 
     <div id="main-header-content" class="content"> 
     <div class="left"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
      euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
      minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
      aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
      vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
      tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
      mazim placerat facer possim assum. 
     </div> 
     <div class="right"> 
      <div class="left"> 
      <img src="http://www.mywebk9.com/images/question.png" alt="Questions"/> 
      </div> 
      <div class="right"> 
      <span class="small-text">Lorem ipsum dolor sit amet</span> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

和styles.css的：

* 
{ 
    margin: 0; 
    padding: 0; 
} 
body 
{ 
    font-family: Verdana; 
    font-size: 8pt; 
} 
div.content 
{ 
    width: 585px; 
} 
div#header-content div 
{ 
    padding: 20px; 
    text-align: justify; 
} 
div#main-header-content > div.left 
{ 
    padding-left: 40px; 
    padding-right: 7px; 
    text-align: justify; 
    width: 350px; 
} 
div#main-header-content > div.right 
{ 
    padding-left: 7px; 
    padding-right: 15px; 
    width: 165px; 
} 
div#main-header-content div.right div.left 
{ 
    width: 20px; 
} 
div#main-header-content div.right div.right 
{ 
    text-align: left; 
    width: 142px; 
} 
div.left 
{ 
    float: left; 
} 
div.right 
{ 
    float: right; 
} 
.small-text 
{ 
    font-size: smaller; 
}

這在FF和鉻的罰款。它應該是兩列，一列有文字，另一列有圖標和少量文字。我怎樣才能使這項工作在IE瀏覽器？我嘗試了div清除=這兩件事，這是沒有做任何事情。

而且upvotes的人誰可以給我如何編寫跨FF，Chrome和IE瀏覽網頁和使用風格的一些技巧> = 7

來源

2009-09-18 DJTripleThreat

可能是因爲您根本沒有定義DOCTYPE和IE正在查看Quirksmode中的頁面可以設置爲標準模式（或幾乎標準模式）。

我檢查您的網站在標準模式和IE7的2列的行爲，因爲他們應該（像FF &鉻）

來源

2009-09-18 07:31:01

W00t！這個小東西解決了它！ – DJTripleThreat 2009-09-18 20:36:54

我可以提出幾件事情，但我不確定哪些會有幫助，如果確實會有幫助：

將DOCTYPE（例如Transitional HTML 4.01）。這迫使IE進入所謂的「符合標準」模式，而不是委婉的「怪癖」模式;
不要重複使用左右類。它迫使你使用只有IE7 +的子選擇器，並且不需要它;
如果你的div只包含浮點數，它將有0個高度。你可以通過在它下面放置一個0高度的div來解決這個問題，在它上面使用「clear：both」或者在父級上使用「overflow：hidden」
擺脫align =「center」。這不是標準。

這裏是一個骨架考慮使用：

<div id="container"> 
    <div id="left">Text</div> 
    <div id="right"> 
    <div id="icon">(image)</div> 
    <div id="text">(text)</div> 
    </div> 
</div>

結合：

html, body, div { padding: 0; margin: 0; border: 0 none; } /* or a proper reset CSS */ 
#container { margin: 0 auto; width: 585px; overflow: hidden; } /* center */ 
#left { text-align: justify; width: 350px; float: left; } 
#right { width: 235px; float: right; overflow: hidden; } 
#icon { float: left; width: 20px; } 
#text { float: right; width: 142px; }

等。

來源

2009-09-18 07:37:54 cletus

感謝您的提示。我所要做的只是添加文檔類型，它的工作。您獲取此信息的+1。我也會使用它。 – DJTripleThreat 2009-09-18 20:37:45

首先我會跳過所有

div#main-header-content > div.left

與

div#main-header-content div.left

更換，因爲他們沒有工作在IE6。

其次，我會使用

div.right { 
    float: left; 
}

而且additionaly，我肯定會跳過<div align="center">...</div>，因爲它已經過時了。相反，我會重新安排div。內容

div.content { 
    position: relative; 
    width: 585px; 
    margin-left: -292px 
    left: 50%; 
}

訣竅中心到（使用位置：相對或位置：絕對）設置左點的寬度的一半，然後將餘量回元件寬度的一半（其中'element'是你想要居中的元素）。

來源

2009-09-18 07:39:41

修改CSS

div#main-header-content div.left 
    { 
     padding-left: 40px; 
     padding-right: 7px; 
     text-align: justify; 
     width: 350px; 
    } 
    div#main-header-content div.right 
    { 
     padding-left: 7px; 
     padding-right: 15px; 
     width: 165px; 
    }

相反烏爾CSS這些類的ü嘗試能正常工作在IE和Firefox太..

來源

2009-09-18 08:19:27 Murugesh

不能得到浮球左/右爲一個div在Internet Explorer中工作

回答

相關問題