修復佈局

我有一個佈局錯誤，在IE6中顯示出來，並我試圖想出一個辦法給一些線索，這些內容在我們的內容區域，這樣就不會下降在導航菜單下方。可悲的是，雖然這可能會是比較容易解決，如果我能重新設計整個網頁，我不能這樣做......這是一個活的站點承載很多很多內容頁......它只能在斷裂處情侶的地方，在IE6，在一些不同尋常的情況......所以採取了內容所有者的重大布局變化的風險是不是真的合理。修復佈局

佈局應該是這個樣子：

+-------+ +-------------------+ 
| Menu | | Content chunk 1 | 
|  | +-------------------+ 
|  | +-------------------+ 
+-------+ | Content chunk 2 | 
      +-------------------+ 
      Footer

但在IE 6，它看起來像：

+-------+ 
| Menu | 
|  | 
|  | 
+-------+ 
+-------------------+ 
| Content chunk 1 | 
+-------------------+ 
+-------------------+ 
| Content chunk 2 | 
+-------------------+ 
      Footer

我一直在尋找在試圖解決這一問題，並打算通過一些文獻所建議here，但我希望一個css大師也許可以很容易地看到一些光，我不是。

的代碼看起來是這樣的：

<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<body> 
<div style="margin: 11px auto; width: 775px"> 

    <!-- Menu --> 
    <div style="width:160px; float:left; clear:left; border:#999 1px dashed;"> 
     Menu Item 1<br /> 
     Menu Item 2<br /> 
    </div> 

    <!-- Main content area --> 
    <div style="position: relative; width: 565px; float: left; margin-right: -222px"> 

     <!-- I'm able to start modifying here. --> 
     <!-- Content chunk 1 --> 
     <table border="1"> 
      <tr> 
       <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td> 
       <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td> 
       <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td> 
       <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td> 
       <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td> 
      </tr> 
     </table> 

     <!-- I'd like to be able to stop modifying here. --> 

     <!-- Content chunk 2 --> 
     <table border="1"> 
      <tr> 
       <td>This is data chunk 1</td> 
       <td>This is data chunk 2</td> 
       <td>This is data chunk 3</td> 
       <td>This is data chunk 4</td> 
       <td>This is data chunk 5</td> 
      </tr> 
     </table> 

     <!-- I have to stop modifying here. --> 

    <!-- Footer --> 
    <div style="float: clear; text-align: center;"> 
     Here's a footer of some kind. I don't want to be overlapped. 
    </div> 

</div> 

</body> 
</html>

順便說一句，我知道周圍內容區域的區域的CSS樣式聲明是不理想的。我沒有對它們編碼，我只需要處理它們。

我還沒有多少運氣......但我也知道css是而不是我的專業知識所在。

對此提出建議？還是無望？

編輯：我對這個問題做了一些修改，試圖提高清晰度...希望擺脫downvote或兩個。非常感謝那些你已經作出了迴應......我要開始通過這些對策現在要對其進行評估。

來源

2009-02-13 Beska

有人倒投了問題。但是它的一個合理的問題是，實際上錯誤的描述是非常薄弱的，嘗試添加更多細節，可能是一個屏幕截圖的鏈接。 – AnthonyWJones 2009-02-13 17:10:12

好的......謝謝你的擡頭。我會看看我是否無法澄清問題的本質。 – Beska 2009-02-13 18:27:25

我看不到任何方式只使用CSS來糾正此問題。 IE6的打包計算將以這樣一種方式執行，除非主內容區域被展開，否則內容將在菜單下移動。我不知道這是否會在你的限制範圍內工作，但是這樣的一些代碼可以直觀地修正它。

function resize_content () 
{ 
    var main = document.getElementById ("main"); 
    var content = document.getElementById ("content"); 
    if (main && content) 
      main.style["width"] = (content.clientWidth + 160) + "px"; 
}

爲了清晰起見，我使用了ID，但是如果您無法修改標記，則可以使用親屬獲取元素。

來源

2009-02-13 18:27:25

我說，如果你不能獲取到565px的div，因爲這是不是與菜單內聯定位本身是絕望......

這裏的東西，你可以用JS做：

<!-- I'm able to start modifying here. --> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('table#firstTable').parent().parent('div').removeAttr('style').attr('style', 'margin: 11px auto;'); 
     }); 
    </script>

首先你擺脫對DIV硬編碼的風格，然後重新添加任何你想呆在那裏。很笨拙，但我希望你明白這個主意。

來源

2009-02-13 17:15:05 montrealist

不行，他可以用一個！重要的選擇器來覆蓋他所需要的，甚至JS，如果順便提到 – annakata 2009-02-13 17:19:16

，它會在你刪除width：775px時起作用，因爲它會讓565px div跳轉，因爲由於邊界的附加寬度（160 + 565 +邊框不等於775），它不適合放在菜單的一行上。 – montrealist 2009-02-13 17:20:27

我知道這是不是你正在尋找的解決方案，但一個可能的替代方法是更改文本本身，並添加一個懸停顯示整個事情...例如：

< TD> <跨度標題=「這是數據塊1 withALongChunkThatDoesn'tDivideWell」>這是數據塊1 ... </</td>

來源

2009-02-13 17:18:14

根本沒有一個解決方案，你會喜歡並被允許實行。錯誤地將DOCTYPE（「Dtd Xhtml」）引發IE6進入怪癖模式，從中無法返回。具體來說，在怪癖模式下，絕對沒有辦法強制IE6不「拉伸」的元素，這打破了你的浮動。如果你可以訪問「主要內容」div，你可以讓它出現（仍然拉伸）在同一條「線路」上，但是除此之外，你只需要添加空格或<wbr> S：

<!-- this works, but would be hard to implement programmatically --> 
<td>This is data chunk 1 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td> 
<td>This is data chunk 2 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td> 
<td>This is data chunk 3 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td> 
<td>This is data chunk 4 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td> 
<td>This is data chunk 5 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>

來源

2009-02-13 17:39:14

「過渡DOCTYPE將IE6引入怪癖模式...」僅當DOCTYPE不是頁面上的第一條語句時 - 不是在這種情況下。 – Traingamer 2009-02-13 20:11:37

你是對的 - 我認爲這是錯誤的框架，然後，而不是過渡DTD，這是把IE瀏覽器扔進怪癖模式。 – 2009-02-13 20:31:23

如果你可以用在其他塊級元素違規表，如div標籤，你可以風格，下面的div：

<div style="width: 100%; overflow: scroll;"> 
    <table border="1"> 
     <tr> 
      <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td> 
      <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td> 
      <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td> 
      <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td> 
      <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td> 
     </tr> 
    </table> 
</div>

這將使表成可滾動的窗口，所以它不會拉伸div超過565像素。當然，如果讓表格可滾動是您客戶的選擇，這當然只適用於您。不幸的是，你沒有很多其他的選擇。

來源

2009-02-13 17:44:51

如果我理解正確的話，我想你正在尋找類似下面的內容：

<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<body> 
<div style="margin: 11px auto; width: 775px; position: relative"> 

    <!-- Menu --> 
    <div style="position: absolute; width:160px; left: 0; top: 0; border:#999 1px dashed;"> 
      Menu Item 1<br /> 
      Menu Item 2<br /> 
    </div> 

    <!-- Main content area --> 
    <div style="margin-left: 165px"> 

      <!-- I'm able to start modifying here. --> 
      <!-- Content chunk 1 --> 
      <table border="1"> 
        <tr> 
          <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td> 
          <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td> 
          <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td> 
          <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td> 
          <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td> 
        </tr> 
      </table> 

      <!-- I'd like to be able to stop modifying here. --> 

      <!-- Content chunk 2 --> 
      <table border="1"> 
        <tr> 
          <td>This is data chunk 1</td> 
          <td>This is data chunk 2</td> 
          <td>This is data chunk 3</td> 
          <td>This is data chunk 4</td> 
          <td>This is data chunk 5</td> 
        </tr> 
      </table> 

      <!-- I have to stop modifying here. --> 

    <!-- Footer --> 
    <div style="float: clear; text-align: center;"> 
      Here's a footer of some kind. I don't want to be overlapped. 
    </div> 

</div> 

</body> 
</html>

以上CSS執行以下操作：外層的div相對定位，它允許你再取使菜單div並將其絕對放置在其左上角。然後，內容的左側放置了一個165px的左邊距。任何不適合內容空間的內容都應該向右溢出。我沒有辦法在IE 6中進行測試，這在Safari中有效，應該在Firefox中使用。

來源

2009-02-13 19:11:42

回答

相關問題