Firefox中的表單元寬度問題

下面的代碼應該使右側顯示的60％顯示爲紅色。它在Chrome中運行，但不在Firefox中運行。在Firefox中，它使整個屏幕呈現紅色。任何人都可以幫我解決這個問題嗎？Firefox中的表單元寬度問題

<table border="0" width="100%"> 
    <tr> 
    <td id="l" width="30%" height="200px"></td> 
    <td id="m" width="3%" style="background-color:green"></td> 
    <td id="r" width="60%" height="200px"></td> 
    </tr> 
</table>  
<script> 
     w = $('#r').width(); 
     h = $(window).height(); 

     $("#r").css({'width' : w, 'height' : h, 'position': 'relative', 'top': '0px', 'left': '0px'}); 
     $("#r").append("<div style='width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color:red;'></div>"); 

</script>

PS：我不能使用 '背景色：紅' 在 'TD';我需要在代碼中添加新的'div'到表格單元格中（因爲這是更大設計的一部分）。非常感謝。

來源

2012-03-29 Bahar S

試試這個：

<table border="0" width="100%"> 
     <tr> 
      <td id="l" width="30%" height="200px"> 

      </td> 
      <td id="m" width="3%" style="background-color: green;"> 

      </td> 
      <td id="r" width="60%" height="200px" style="vertical-align:top;"> 

      </td> 
     </tr> 
    </table> 
    <script> 

     w = $('#r').width(); 
     h = $(window).height(); 

     $("#r").css({ 'width': w, 'height': h, 'position': 'relative' }); 
     $("#r").append("<div style='width: 100%; height: 100%; position: absolute; background-color:red;'></div>"); 

    </script>

來源

2012-03-29 18:09:55

現在的工作，謝謝。 – 2012-03-29 18:16:57

我剛剛意識到這個解決方案只是傳遞紅色的矩形。紅色區域的寬度不是screenwidth * 60％（這是我們需要的）;相反，寬度是屏幕寬度。您需要滾動到右側才能看到整個矩形。這個問題仍然與Firefox。任何想法？謝謝。 – 2012-03-30 19:49:49

$（「＃r」）。append（「

」）; – 2012-03-30 20:19:52

從絕對更改位置相對在Firefox和Chrome爲我工作。

<table border="0" width="100%"> 
    <tr> 
    <td id="l" width="30%" height="200px"></td> 
    <td id="m" width="3%" style="background-color:green"></td> 
    <td id="r" width="60%" height="200px"></td> 
    </tr> 

</table>  
<script> 
     w = $('#r').width(); 
     h = $(window).height(); 

     $("#r").css({'width' : w, 'height' : h, 'position': 'relative', 'top': '0px', 'left': '0px'}); 
     $("#r").append("<div style='width: 100%; height: 100%; position: relative; top: 0px; left: 0px; background-color:red;'></div>");

來源

2012-03-29 18:17:41 cameronbriar

它沒有爲我工作。謝謝BTW :) – 2012-03-29 18:32:32

TD的位置相對不好，所以DIV從主要父母處獲得它的位置。

或許這將更好地爲你只是包裹在單元格的內容在一個DIV

$("#r").wrapInner("<div style='width: 100%; height: 100%; background-color:red;'></div>");

演示：http://jsfiddle.net/DCCU9/

來源

2012-03-29 18:21:02 charlietfl

它沒有在我的項目中工作。謝謝BTW :) – 2012-03-29 18:32:50

Firefox中的表單元寬度問題

回答

相關問題