Вопрос по position, css, positioning, firefox – Абсолютное позиционирование CSS внутри ячеек таблицы не работает в Firefox

10

Я не могу понять эту проблему позиционирования в Firefox. Кажется, он не следует правилу абсолютного позиционирования. Есть ли что-то, что я делаю, что не должно быть сделано, но некоторые обозреватели справляются с этим, а некоторые нет?

JS Fiddle:

Оригинал -http://jsfiddle.net/g9qzh/

Обновлено -http://jsfiddle.net/g9qzh/2/

Работает в IE, Chrome, Safari, Opera

Вот фактический код. Дайте мне знать, если я не соблюдаю какой-то стандарт, о котором я не знаю.

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

& # x200B; Моя единственная подсказка в том, что есть какое-то другое значение, которое я должен назначитьtd это заставило бы это работать. В некоторых других вопросах о стекопереработке упоминалось, что Firefox неправильно с этим работает, но я не смог найти ответ. Я пытался присвоить верхнему и левому значениям ноль, но FF не сдвинулся с места. & # X200B;

Начиная с Firefox 32, абсолютное позиционирование элементов в ячейках таблицы, кажется, работает нормально. Jens
Это было зарегистрировано как ошибка 14 лет назад!bugzilla.mozilla.org/show_bug.cgi?id=35168 Прочитайте эту полезную статьюdavidwalsh.name/table-cell-position-absolute Ashraf Sabry
это работает в FF 12.0 для меня. & Quot; Два & Quot; перекрывается "три" - но это все еще не так, обратитесь к моему ответу Brandt Solovij
Каждый "два" должен перекрывать свои собственные "три" Я не уверен, что вы просто видели оба "два" перекрывая те же три EGHDK

Ваш Ответ

7   ответов
1

Вы используете идентификаторы

Идентификаторы уникальны. Используйте классы, если вы хотите повторно использовать назначение стиля.

Обновил мою скрипку JSsee above и это все еще не работает EGHDK
1

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

<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
    </td>
</tr>

и для css:

#two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}
0

Помимо дубликатаID проблема отмечена Брандтом, присваивающимпозиционирование в ячейках таблицы в лучшем случае изворотливо - Я удивлен, что это работает в любых браузерах. Если вам нужно использовать таблицу, оберните элементы, которые вы хотите поместить в div, и назначьте div оберткиposition: relative:

<table>
    <tr>
        <td>
        <div class="wrapper">
            <div id="three">Three</div>
            <div id="two">Two</div>
        </div>
        </td>
    <tr>
</table>

CSS

#two {
   position: absolute;
   top: 0;
}
.wrapper {
   position: relative;
}
1

Проблема заключается в том, как FF отображает таблицы. Если вы установите свои TD вdisplay:inline-block; он должен отображаться правильно.

12

Измените ID на классы, а также отобразите их в виде блоков, чтобы исправить это:

http://jsfiddle.net/GchWZ/

Это лучше и более "правильно" использовать внутренний div, как указано в этом сообщении о переполнении стека:Поддерживает ли Firefox положение: относительно элементов таблицы?

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>
Это сработало! Отлично, теперь, как ты это узнал? Это то, о чем я должен прочитать (я действительно не знаю правильного использованияdisplay) или это просто исправление & quot; исправление & quot; для Firefox или это должна быть стандартная операционная процедура, когда вы будете делать это в будущем? EGHDK
На самом деле сейчасdiplay:inline-block работал. Я собираюсь выбрать ваш ответ, так как в Интернете требуется дополнительная строка CSS, а не намного больше HTML. EGHDK
Да уж,display:block было временное решение, потому что теперь, когда я попытался расширить его немного больше, и потребовалосьdisplay:block-inline это также сломалось в Firefox, но все еще работало в любом другом браузере. EGHDK
Я помню, как читал давным-давно кое-что о том, как Firefox по-разному обрабатывает тд. Я постараюсь найти статью.
-1

Есть законные причины для использования отображения CSS: стиль таблицы. Это устраняет проблемы, которые отображают: block и display: inline-block не решаются. Эти причины занимают целую главу книги о стилях CSS, поэтому я не буду вдаваться в них здесь. В этой же книге также описана проблема позиционирования внутри элементов с таким типом отображения. Спецификации CSS 2.1 просто не решают проблему, и Mozilla выбрала курс, который игнорирует попытки создать контекст позиционирования с этими элементами. Позиционирование CSS-таблицы является хорошо разработанной, зрелой методологией, а не «хитрым». - это просто требует понимания своих ограничений - как и любой другой элемент CSS. Для схем размещения жидкости и других схем, где размер элемента является переменным или неизвестным, он необходим для вертикального разнесения и позиционирования.

Было предложено одно предложение в этой теме - создать div внутри "table-cell" установить элемент в положение: относительный и использовать его для контекста позиционирования. Другой метод состоит в том, чтобы встроить другую таблицу CSS в эту ячейку и использовать ее для позиционирования элементов в сетке. Третий метод - обернуть вашу таблицу CSS в другой элемент, который создает контекст позиционирования.

Я немного опаздываю, возвращаясь к этому, но я удивлен понижением голосов. Зачем? Я дал довольно подробный ответ на эту тему здесь:stackoverflow.com/questions/8951993/…  ... и получил главный голос "за" и "Лучший ответ" за мой ответ. Я использую таблицы CSS для горизонтального позиционирования меню и в качестве решения проблемы & quot; Stick Footers & quot; без обращения к абсолютным размерам (о, господин пользователь? вам нужно сделать так, чтобы ваш дисплей был таким, чтобы он выглядел правильно ...) или JavaScript.
0

Если вы хотите расположить вещи сверхуand Внизу ячейки, также в Firefox, я заставил ее работать следующим образом: CSS и (к сожалению) jQuery.

  1. Use a wrapper div (div.inner) inside your td which has position=relative style in the td. Inside the wrapper I added 2 divs which are to be positioned at the top and bottom of the cell. enter image description here

  2. Positioning at the top (class=interval-start) is for free, via CSS positioning.

  3. Positioning the div.interval-end at the bottom is done via script, which adds the styling shown in the picture. With variable td-heights and the wrapper div being 0-height by default, you need a way to tell the element how far it should go to the bottom. The script is as follows:

            $("table .inner .interval-end").each(function () {
                $(this).css({top: ($(this).parent().parent().height() - 10) + "px"})
            }).show()
    
  4. I initially made the div.interval-end invisible, set the 'top' style, and then made it visible via jQuery show().

Надеюсь, что это помогает любому, кто пытается достичь того же. Дайте мне знать, если есть лучшие методы, особенно если эти методы не требуют сценариев. Кстати: я пытался установить стиль высоты для div.inner-обертки, но он портится с разметкой таблицы в Firefox.

Похожие вопросы