2016-01-14 4 views
10

У меня есть таблица, что для одного из его ячеек я использую правилоStyling непоследовательности Chrome и Firefox

border-right: 3px solid #000 !important; 

Он отлично работает на Chrome, но в Firefox граница невидима. Я говорю «невидимый», потому что, если я деактивирую правило, я вижу, что содержимое ячеек перемещается немного.

-moz-box-sizing: border-box; 

Ничего не помогло, насколько я могу судить.

Так что если вам нужно было запустить this небольшой пример в Chrome, это выглядело бы отлично. В Firefox вы можете обнаружить некоторые ошибки (не забудьте просмотреть более широкую ширину, чтобы увидеть ошибку)

Я пробовал различные другие предлагаемые варианты без каких-либо хороших результатов. Один ближе к решению вопроса удалял border-collapse в целом, но это делает все границы открыты, как видно из картинки ниже:

enter image description here

Является ли это общие для Firefox, и как я могу преодолеть эту проблему.

+0

Не могли бы вы предоставить свой HTML-код или, лучше, фрагмент рабочего кода? –

+0

Пожалуйста, напишите свой код в фрагменте кода, который будет приятным –

+0

@JamesDonnelly добавлен небольшой пример. Пожалуйста, не обращайте внимания на разметку, ее беспорядок, который я знаю. Также убедитесь, что вы увеличили ширину окна результатов, чтобы увидеть правильную таблицу. – dearn44

ответ

-1

Я обновил свой первоначальный jsfiddle https://jsfiddle.net/sfodcjkz/4/ с некоторыми из незначительных щипков https://jsfiddle.net/sfodcjkz/18/.

Изменения, которые я перенесенная вашей скрипки являются:

  1. Удален пустыми <tbody> элементов. Лучшей практикой является группировка строк тела внутри <tbody>. Некоторые современные браузеры могут автоматически исправлять ошибки, но не все браузеры достаточно умны. Поэтому для согласованности мы можем избежать зависимости от более умных браузеров.
  2. Далее у меня были проблемы с этим CSS:

Line: 349

.responsive-table thead { 
    clip: auto; 
    height: auto; 
    overflow: auto; 
    position: relative; 
    width: auto; 
} 

Line: 258

.responsive-table thead { 
    border: 0 none; 
    clip: rect(1px, 1px, 1px, 1px); 
    height: 1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

Просто удалены эти стили CSS и вы можете увидеть более чистый вид.

+1

Я не уверен, почему этот ответ имеет нижний предел. Я могу подтвердить, что этот метод работает правильно, и что действительно пустые элементы '' могут путать Firefox. До тех пор, пока downvoter не даст правильную причину, я проигнорировал бы downvote. – dearn44

-1

Это известная ошибка в Firefox. Это вызвано установкой border-collapse на collapse. Одним из решений является установка border-collapse на separate.

+0

Привет, Стефан, исследуя проблему, я действительно обнаружил, что она вызвана тем, что firefox окрашивает цвет фона на границах, если используется параметр 'collapse', поэтому я попробовал все другие возможные варианты. Я думаю, что все они дают одинаковый результат, где они показывают все границы рядом друг с другом, поэтому вы можете видеть, например, ячейку с синими/черными/оранжевыми границами на одной стороне. Я обновил вопрос с изображением, показывающим точную проблему. – dearn44

+1

это не ошибка. неправильные html и css могут создавать такие проблемы. попробуйте это https://jsfiddle.net/sfodcjkz/18/ –

+0

Ну, я попробовал скрипку с раздельным значением, и это сработало для меня. Пожалуйста, попробуйте сами, прежде чем меня опротестовать. –

0

Одна вещь, чтобы попробовать было бы добавить еще один элемент блока внутри ячейки таблицы и применить стиль границы к этому элементу. Например, вы можете попробовать сделать что-то вроде этого:

<table> 
    <tr> 
    <td> 
     <div style="border-right: 3px solid #000;">My Content</div> 
    </td> 
    </tr> 
</table> 

Ячейка таблицы, как <td> и <th> имеют размер по-разному, чем обычный блок, встроенный блок, или встроенные элементы и поэтому границы могли бы также получить несколько вычислены по-разному в зависимости от доступное пространство.

Используя <div> внутри вашей ячейки таблицы, вы можете установить ее ширину до 100%, а ее высоту до 100%, чтобы она покрывала всю доступную ячейку таблицы, тогда вы можете применить любую границу, которая вам нравится, к div и с box-sizing:border-box, установленным на элементе div, он должен выглядеть так, как вы хотите. Например:

<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>

Here is more info on table sizing/box model quirks

+0

Привет, Бен, это действительно делает границы экрана Firefox. Но после того, как вручную попробовал его для первых двух строк, я заметил, что даже удалив заполнение для '' граница 'div' фактически немного слева, и она не соединяется до конца, оставляя пустые места в каждом соединении , – dearn44

+0

Вам нужно убедиться, что расстояние между ячейками таблицы и отступом равно нулю. Пустое пространство является результатом использования элемента Table для макета. Подробнее о том, как сбросить интервал здесь: http://stackoverflow.com/questions/339146/why-are-cellspacing-and-cellpadding-not-css-styles –

+0

Спасибо за предложение, я попробую, как только найду когда-то. – dearn44