主页 / 问题 / 1147428
Accepted
Yaroslav Bondar
Asked:2020-06-30 21:15:58 +0000 UTC2020-06-30 21:15:58 +0000 UTC

跨浏览器兼容，相同代码不同块显示

  • 772

有 2 个浏览器，因此在其中布局时块的不同显示：

阻止显示第一个浏览器 Mozilla Firefox 68.3.0esr（64 位）：

Mozilla 火狐 68.3.0esr

第二个 Chromium块映射：80.0.3987.163（官方构建）（64 位） ：

Chromium：80.0.3987.163（官方版本）（64 位）

此块的代码：

.popular__wrapper {
  max-width: 978px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

.popular__button {
  position: absolute;
  /* left: 204px; */
  left: 20.86%;
  /* top: 154px; */
  top: 11.51%;
}

.popular__button-text {
  margin-bottom: 10px;
}

.popular__header {
  display: flex;
  justify-content: end;
  width: 100%;
  /* margin-bottom: 100px; */
  margin-bottom: 10.48%;
}

.popular__header-container {
  width: 48.21%;
}

.popular__header-title {
  /* margin-bottom: 50px; */
  margin-bottom: 12%;
  /* width: 100%; */
}

.popular__header-title-text {
  word-wrap: break-word;
}

.popular__header-text {
  width: 100%;
}
<div class="popular__wrapper">
  <div class="popular__button button">
    <div class="popular__button-text button__text">
      <a href="#" class="popular__button-text button__text">full shop</a>
    </div>
    <div class="popular__button-img button__img">
      <a href="#" class="popular__button-text button__text"><img src="img/button/01.svg" alt="arrow"></a>
    </div>
  </div>
  <header class="popular__header header">
    <div class="popular__header-container">
      <div class="popular__header-title header__title">
        <h1 class="popular__header-title-text header__title-text"><span class="header__title-color">popular</span><br>watch</h1>
      </div>
      <div class="popular__header-text  header__text">
        Breguet's philosophy can be defined as a tireless process of creative search and implementation of innovations, the desire to always be one step ahead of its era and at the same time strictly comply with the technical and aesthetic standards developed
        by A.L. Breguet and laid the foundations of modern watchmaking.
      </div>
    </div>
  </header>
</div>

任务：在所有浏览器中显示块，因为它在第一个浏览器中显示。

вёрстка

1 个回答

  1. Best Answer

    结果，一切决定如下：

        .popular__wrapper {
    max-width: 978px;
    margin: 0 auto;
    padding: 0 15px;
    /* position: relative; */
}
.popular__header {
    display: inline-block;
    position: relative;
    /* min-height: 200px; */
    /* justify-content: end; */
    width: 100%;
    /* margin-bottom: 100px; */
    margin-bottom: 10.48%;
}
.popular__button {
    position: absolute;
    /* left: 204px; */
    /* left: 20.86%; */
    /* top: 154px; */
    /* top: 11.51%; */
    left: 204px;
    top: 150px
}
.popular__button-text-block {
    margin-bottom: 12px;
}
.popular__header-container {
    float: right;
    width: 48.21%;        
}
.popular__header-title {
    /* margin-bottom: 50px; */
    margin-bottom: 12%;
    /* width: 100%; */
}
.popular__header-title-text {
    word-wrap: break-word;
}
.popular__header-text {
    width: 100%;
}

    良好的旧浮动 vs flex / Baron Munchausen 规则......

    • 0

相关问题