Question

用于查看具有良好/不正确对齐问题的HTML和CSS网站的URL：http://jimmiheiserman.com/bannerDev/crossTest/

我正在使用大小不同的div创建不匹配的砖砌分层效果，将它们与flex居中，然后绝对向左或向右移动它们以将它们全部放置到位。在一般较好的浏览器（Chrome，FF，Edge，Safari 11，Chrome移动版，甚至iOS 8 / Safari 11）中，它似乎都可以很好地工作。但是在损坏的浏览器中，每个div似乎都是由其左上角而不是中心锚定的-用Flex布局锚定。然后当我用left：-100px或其他东西进行调整时，它们会稍有偏离；对于较宽的div来说，效果会更糟。

我附上了一些屏幕截图，以显示它的外观以及在某些损坏状态下的外观。我已经阅读了有关<= IE11中存在问题的flex布局的信息，但这也显示在<= iPhone7中以及一些较旧的移动android中也有问题。

在许多现代浏览器中布局如何正确显示。 successful layout

IE11及以下版本中的残破，未对齐版本（以及chrome和FF的非常旧的版本，但我不太介意）。 broken layout

iOS Safari 10及更低版本上的布局损坏。 broken layout

也许有一个干净的修复程序，或者可能需要大量重写；我不知道。该演示是更充实的项目的一部分，因此，我自然希望在这里进行更简单的修复。

我还制作了一个Codepen，但是Codepen有时只会显示一条消息，说明不支持IE11浏览器，因此测试交叉兼容性不是那么容易，但是这里也是如此：https://codepen.io/jimmi_heiserman/pen/ZMoexQ?editors=1111 可能需要使用/ full /而不是/ pen /在其他浏览器中查看此处的HTML：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=920, user-scalable=yes" />
</head>

<body>
  <div id="all-banners">
    <div id="banner-edge-1" class="banner-container"></div>
    <div id="banner-edge-2" class="banner-container"></div>
    <div id="banner-edge-3" class="banner-container"></div>
    <div id="banner-edge-4" class="banner-container"></div>
    <div id="banner-edge-5" class="banner-container"></div>
    <div id="banner-edge-6" class="banner-container"></div>
    <div id="banner-edge-7" class="banner-container"></div>
    <div id="banner-edge-8" class="banner-container"></div>
    <div id="banner-1" class="banner-container banner-primary"></div>
    <div id="banner-2" class="banner-container banner-primary"></div>
    <div id="banner-3" class="banner-container banner-primary"></div>
    <div id="banner-4" class="banner-container banner-primary"></div>
    <div id="banner-5" class="banner-container banner-primary"></div>
    <div id="banner-6" class="banner-container banner-primary"></div>
    <div id="banner-7" class="banner-container banner-primary"></div>
    <div id="banner-8" class="banner-container banner-primary"></div>
    <div id="banner-9" class="banner-container banner-primary"></div>
  </div>
</body>
</html>

和CSS：

html, body {
  background: radial-gradient(circle, #fafafa, #444444);
  margin: auto;
  height: 100%;  
  overflow: hidden;
}

#all-banners {
  display: flex;
  justify-content: center;
}

.banner-container {
  border-style: solid;
  border-color: black;
  border-radius: 10px;
  border-width: 1px;
  background-color: lavender;
  position: absolute;
  overflow: hidden;
}

.banner-primary {
  background-color: #ffcccc;
}

#banner-1 {
  width: 160px;
  height: 800px;
  transform:translate(-350px, 60px);
}

#banner-2 {
  width: 120px;
  height: 600px;
  transform:translate(-200px, 60px);
}

#banner-3 {
  width: 560px;
  height: 90px;
  transform:translate(150px, 60px);
}

#banner-4 {
  width: 400px;
  height: 300px;
  transform:translate(70px, 160px);
}

#banner-5 {
  width: 150px;
  height: 70px;
  transform:translate(355px, 160px);
}

#banner-6 {
  width: 150px;
  height: 620px;
  transform:translate(355px, 240px);
}

#banner-7 {
  width: 190px;
  height: 190px;
  transform:translate(-35px, 470px);
}

#banner-8 {
  width: 200px;
  height: 390px;
  transform:translate(170px, 470px);
}

#banner-9 {
  width: 320px;
  height: 190px;
  transform:translate(-100px, 670px);
}

#banner-edge-1 {
  width: 1000px;
  height: 200px;
  transform: translate(-700px, -150px);
}

#banner-edge-2 {
  width: 620px;
  height: 100px;
  transform: translate(120px, -50px);
}

#banner-edge-3 {
  width: 1000px;
  height: 400px;
  transform: translate(940px, -50px);
}

#banner-edge-4 {
  width: 1000px;
  height: 500px;
  transform: translate(940px, 360px);
}

#banner-edge-5 {
  width: 1000px;
  height: 1200px;
  transform: translate(650px, 870px);
}

#banner-edge-6 {
  width: 570px;
  height: 1200px;
  transform: translate(-145px, 870px);
}

#banner-edge-7 {
  width: 1000px;
  height: 1400px;
  transform: translate(-940px, 560px);
}

#banner-edge-8 {
  width: 1000px;
  height: 490px;
  transform: translate(-940px, 60px);
}

在某些浏览器（例如IE和移动Safari 10）上，带有“证明内容中心”的显示弹性未对齐

0 个答案: