Почему эта таблица отображается по-разному между Chrome и Firefox? - PullRequest
Новая
       0

Почему эта таблица отображается по-разному между Chrome и Firefox?

0 голосов
/ 23 сентября 2018

У меня есть таблица, которая по-разному рендерится между Chrome и Firefox.Вывод Chrome правильный, а вывод Firefox - нет. 

body {
  background-color: #e1e1e1;
  word-wrap: break-word
}

#about-table {
  margin: 0 auto;
}

.panel {
  background-color: #f5f5f6;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  color: #1c1c1c;
  margin: 16px;
  padding: 32px;
  text-align: center;
}

.person {
  display: inline;
}

.portrait {
  width: 100%;
}

.portrait-container {
  max-width: 256px;
  width: 50%;
}

.portrait-label {
  font-weight: 600;
  width: 128px;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
  <link rel="stylesheet" href="/lib/index2.css" />
</head>
<body>
  <div class="panel">
    <table id="about-table">
      <tr class="person">
        <td class="portrait-container"><img class="portrait" src="/img/head-julian.jpg" /></td>
        <td class="portrait-label">Person 1</td>
      </tr>
      <tr class="person">
        <td class="portrait-container"><img class="portrait" src="/img/head-simon.jpg" /></td>
        <td class="portrait-label">Person 2</td>
      </tr>
      <tr class="person">
        <td class="portrait-container"><img class="portrait" src="/img/head-jacob.jpg" /></td>
        <td class="portrait-label">Person 3</td>
        </tr>
    </table>
  </div>
</body>

В Firefox (и Edge) третий элемент в таблице всегда помещается на отдельной строке, независимо от того, сколько места по горизонтали.

1 Ответ

0 голосов
/ 23 сентября 2018

Применять display: inline; к строке таблицы (через класс .person) на самом деле не имеет смысла - либо вы используете DIV и применяете к ним соответствующий CSS-код, либо вы используете "настоящую" таблицу (например, элементы HTML-таблицы, такие какtable, tr and td`, как это было бы без этого правила CSS).

Все остальное, т.е. каждая «смесь» свойств макета таблицы по умолчанию и различных определений CSS display зависит только оттерпимость / интерпретация браузера, которую вы испытываете.Но я сомневаюсь, что это (т. Е. Теги tr и их определение display: inline) является допустимым сочетанием «нативных» свойств макета HTML и CSS.

Я бы, например, использовал свойства flexbox в DIVs вместовсе эти не реальные элементы таблицы, как показано ниже: 

body {
  background-color: #e1e1e1;
  word-wrap: break-word
}

#about-table {
    display: flex;
    justify-content: center;

}

.panel {
  background-color: #f5f5f6;
  border-radius: 4px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
  color: #1c1c1c;
  margin: 16px;
  padding: 32px;
  text-align: center;
}

.person {
  display: flex;
  width: 30%;
  align-items: center;
}

.portrait {
  width: 100%;
}

.portrait-container {
  max-width: 256px;
  width: 50%;
}

.portrait-label {
  font-weight: 600;
  width: 128px;
}
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
    <link rel="stylesheet" href="/lib/index2.css" />
</head>
<body>
  <div class="panel">
    <div id="about-table">
      <div class="person">
        <div class="portrait-container"><img class="portrait" src="/img/head-julian.jpg" /></div>
        <div class="portrait-label">Person 1</div>
      </div>
      <div class="person">
        <div class="portrait-container"><img class="portrait" src="/img/head-simon.jpg" /></div>
        <div class="portrait-label">Person 2</div>
      </div>
      <div class="person">
        <div class="portrait-container"><img class="portrait" src="/img/head-jacob.jpg" /></div>
        <div class="portrait-label">Person 3</div>
        </div>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...