Float left bug в Firefox, когда родительский элемент абсолютно позиционирован? - PullRequest
Новая
       1

Float left bug в Firefox, когда родительский элемент абсолютно позиционирован?

1 голос
/ 28 января 2020

У меня необычное требование к макету, но у меня оно работает в Chrome, Edge и IE11, только Firefox не работает, заставляя меня думать, что это может быть ошибка в браузере.

Здесь как должна выглядеть страница: enter image description here

Но вот как это выглядит Firefox: enter image description here

Обновление: Я также заставил это работать на Chrome без float: left и вместо этого использовать width: fit-content, однако это и width: -moz-fit-content все еще не работают на Firefox.

Плавающий div с красной границей doenst кажется, плавали на всех. В результате синее поле за пределами экрана. 

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  overflow: hidden;
}

.cont {
  display: flex;
  background: grey;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

.col {
  flex-basis: 50%;
  min-height: 600px;
  position: relative;
}

.col-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col1-inner {
  position: absolute;
  top: 40px;
  left: 0;
  bottom: 40px;
  right: -2000px;
}

img {
  max-width: 100%;
  width: auto;
  height: 100%;
}

.content {
  border: 2px solid red;
  float: left;
  height: 100%;
  position: relative;
}

.content:after {
  content: "";
  background: blue;
  display: flex;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrapper">
  <div class="cont">
    <div class="col col-1">
      <h1>Content</h1>
      <p>Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff Stuff </p>
    </div>
    <div class="col">
      <div class="col1-inner">
        <div class="content">
          <img src="https://images.unsplash.com/photo-1580152040915-ad6ceeaeb8c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80" />
        </div>

      </div>
    </div>
  </div>
</div>

https://codepen.io/_j_i_m_fb_/pen/GRgaKQE

1 Ответ

0 голосов
/ 29 января 2020

Хромой ответ на актуальный вопрос

Это крайний случай из-за использования больших фиксированных единиц. Chrome разрушает div, когда используется float. Firefox нет. Чтобы определить, какой браузер технически корректен, мы должны взглянуть на соответствующую спецификацию. Как скучно, что ... вместо этого вот ...

... возможное решение для того, что вы хотите

Я создал альтернативный пример с CSS Grid .

HTML

Простое расположение. Тело используется вместо дополнительного div, с двумя div для левого и правого столбца: 

<body>
    <div class="content">
        <h1>Content</h1>
        <p>Contents</p>    
    </div>               
    <div class="image">
        <img src="https://placehold.it/3450x2300" />
    </div>
</body>

CSS

Тело: 

body {
  display: grid; 
  grid-template-columns: auto auto; 
}
  • Establi sh сетка.
  • Создание двух столбцов равной ширины

Div для содержимого: 

.content {
  display: grid;
  align-content: center;
  max-width: 600px;
  min-width: 400px;
  background: grey;
  padding: 0 20px;
  margin: 0 0 0 auto;
}
  • Establi sh внутренняя сетка
  • Вертикальное центрирование содержимого
  • Используйте соответствующие максимальную и минимальную ширины
  • Вместо justify-items: end, левое поле auto обеспечивает горизонтальное центрирование. Это так, чтобы фон не растянулся полностью влево.

Изображение div: 

.image {
  position: relative; 
  max-width: 700px;
  min-width: 500px;
  background: linear-gradient(to right, grey 0, grey 50%, transparent 50%); 
}
  • Расположите псевдоэлемент относительно этого div
  • Ограничить ширину изображения, чтобы оно не стало слишком большим
  • Ограничить ширину изображения, чтобы оно не стало слишком маленьким
  • Создать фон цвет с градиентом, который покрывает только процент изображения div

Изображение содержится в следующем виде: 

img {
  max-width: 100%;
  padding: 40px 0;
}
  • Ограничить ширину изображения родительским div
  • Раскладывайте по желанию

Пример 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
}

.content {
  display: grid;
  align-content: center;
  max-width: 600px;
  min-width: 400px;
  background: grey;
  padding: 0 20px;
  margin: 0 0 0 auto;
}

.image {
  position: relative;
  max-width: 700px;
  min-width: 300px;
  background: linear-gradient(to right, grey 0, grey 50%, transparent 50%);
}

.image::after {
  content: "";
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: blue;
  position: absolute;
}

img {
  max-width: 100%;
  padding: 40px 0;
}
<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id bibendum enim. Integer blandit arcu lobortis, ultricies quam vitae, elementum urna. Nunc a mauris ex. Aenean egestas neque urna, eu euismod massa ultrices sit amet. Praesent imperdiet
    dictum ante, quis viverra nibh volutpat eu. Sed tempor, quam in molestie tincidunt, eros massa condimentum arcu, ut tempus mauris ligula et arcu. Donec nec faucibus neque, sit amet tincidunt nulla. Nullam et mattis ipsum. Sed euismod porttitor justo
    eu aliquet. Sed hendrerit finibus dignissim. Morbi id ipsum imperdiet, fringilla urna posuere, fermentum justo. Mauris eleifend, orci et eleifend consectetur, augue lacus hendrerit diam, eget dictum lacus sem vitae augue.</p>
</div>

<div class="image">
  <img src="https://placehold.it/3450x2300" />
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...