Проблема ширины ячейки таблицы в Firefox - PullRequest
Новая
       1

Проблема ширины ячейки таблицы в Firefox

0 голосов
/ 29 марта 2012

Следующий код должен сделать справа 60% дисплея красным. Это делает в Chrome, но не в 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: я не могу использовать 'background-color: red' в 'td'; Мне нужно добавить новый div в ячейку таблицы, как вы можете в коде (так как это часть более крупного дизайна).

Ответы [ 3 ]

1 голос
/ 29 марта 2012

Изменение положения с абсолютного на относительное сработало для меня в 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>");
1 голос
/ 29 марта 2012

TD плохо работают с относительной позицией, поэтому DIV получает свою позицию от основного родителя.

Возможно, это будет лучше для вас, просто поместив содержимое ячейки в DIV 

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

Демо: http://jsfiddle.net/DCCU9/

1 голос
/ 29 марта 2012

попробуйте это: 

<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>
...