Макет Flexbox сильно отличается в разных браузерах? - PullRequest
Новая
       4

Макет Flexbox сильно отличается в разных браузерах?

1 голос
/ 11 марта 2019

Работа над макетом для внутренней панели мониторинга, и макет полностью отличается в Chrome / IE и Firefox.Я не эксперт CSS, поэтому любая помощь будет оценена.

https://jsfiddle.net/k8t26zmc/1/

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid blue;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}
<body>
  <main>
    <div class="container">
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
    </div>
  </main>
</body>

Firefox

Firefox

Chrome / IE Chrome/IE

Также в фактической компоновке иногда SVG бывают разных размеров, даже если родитель и все остальное совпадают (опять же только в Chrome)

Firefox

enter image description here

Chrome / IE enter image description here

РЕДАКТ.изображения, поэтому все исправлено не идеально.

Ответы [ 2 ]

3 голосов
/ 11 марта 2019

Я думаю, что вы сталкиваетесь с нежелательным поведением из-за вложения гибкого контейнера, который, как известно, создает некоторые проблемы в некоторых особых случаях.

Добавление width:100% (или любого значения, начиная с 50%) к элементу child решит проблему. Вы заставите их быть настолько широкими, насколько это возможно, тогда они будут сжиматься одинаково, чтобы соответствовать контейнеру. Вы также можете избавиться от height:100%, который бесполезен, так как элементы растянуты по умолчанию.

Я также добавил min-width:0, чтобы убедиться, что они уменьшат размер содержимого : 

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  border: 1px solid blue;
  min-width:0;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}
* {
  box-sizing:border-box;
}
<body>
  <main>
    <div class="container">
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
      </div>
    </div>
  </main>
</body>

Вы также можете избавиться от внутреннего гибкого контейнера и упростить код, как показано ниже: 

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  width: 100%;
  border: 1px solid blue;
  min-width: 0;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}

svg {
  display: block;
  width: 100%;
}

* {
  box-sizing: border-box;
}
<main>
  <div class="container">
    <div class="child">
      <div class="grid">
        <div>
          <p>Planned</p> 4</div>
        <div>
          <p>Actual</p> 0</div>
        <div>
          <p>Ratio</p> 0.00%</div>
        <div>
          <p>Orders</p> 0</div>
        <div>
          <p>Books</p> 0</div>
        <div>
          <p>Value</p> £0.00</div>
      </div>
      <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
    </div>
    <div class="child">
      <div class="grid">
        <div>
          <p>Planned</p> 4</div>
        <div>
          <p>Actual</p> 0</div>
        <div>
          <p>Ratio</p> 0.00%</div>
        <div>
          <p>Orders</p> 0</div>
        <div>
          <p>Books</p> 0</div>
        <div>
          <p>Value</p> £0.00</div>
      </div>
      <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543477535247803, 0, 0, 0.5543477535247803, 141.99500521781533, 133.1409578716224)"></path></svg>
    </div>
  </div>
</main>
0 голосов
/ 11 марта 2019

Насколько я понимаю, что ответ Темани на этот вопрос, я бы поддержал Данилла с сеточным подходом.Это так же круто, как flex (вот почему вы хотите взглянуть на это), и для того, чтобы выложить макроструктуру, возможно, даже лучше.И, конечно, вы можете комбинировать его с гибким (используется на более «микро» уровне).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...