Chrome ломает макет, как я могу это исправить? - PullRequest
Новая
       17

Chrome ломает макет, как я могу это исправить?

0 голосов
/ 19 июня 2019

У меня проблемы с отображением некоторых элементов в Google Chrome.Когда я тестирую код с Firefox или Edge, все в порядке.Похоже, что Chrome вычисляет меньшую ширину для "col-sm-1" или игнорирует заполнение.

У меня есть следующий html: 

/*dropdown size*/

.dropdown-sm {
  font-size: 1.25rem;
}


/* Custom dropdown */

.custom-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  /*   margin: 10px; */
}

.custom-dropdown select {
  background-color: #00c292;
  color: #fff;
  font-size: inherit;
  padding: .5em;
  padding-right: 2.5em;
  border: 0;
  margin: 0;
  border-radius: 3px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: button;
}

.custom-dropdown::before,
.custom-dropdown::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.custom-dropdown::after {
  content: "\25BC";
  height: 1em;
  font-size: .625em;
  line-height: 1;
  right: 1.2em;
  top: 50%;
  margin-top: -.5em;
}

.custom-dropdown::before {
  width: 2em;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 0 3px 3px 0;
}

.custom-dropdown select[disabled] {
  color: rgba(0, 0, 0, .3);
}

.custom-dropdown select[disabled]::after {
  color: rgba(0, 0, 0, .1);
}

.custom-dropdown::before {
  background-color: rgba(0, 0, 0, .15);
}

.custom-dropdown::after {
  color: rgba(0, 0, 0, .4);
}
<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>

<body>
  <main role="main">
    <div id="boottom-page" class="container-fluid">
      <div class="row">
        <div class="col-sm-1">
          <span class="custom-dropdown dropdown-sm">
              <select data-name="change-role">
                  <option>Change role to...</option>
                  <option>User</option>
                  <option>Author</option>
                  <option>Admin</option>
              </select>
          </span>
        </div>
        <div class="col-sm-2">
          <div>
            <div>
              <button type="button" class="btn btn-info">Change </button>
              <button type="button" class="btn btn-info">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

И Firefox, и Edge прекрасно их отображают:

, но Chrome нарушает макет:

Что можно сделать, чтобы исправить проблемы с макетом в Chrome?

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Протестировал ваш код в Firefox и Chrome.Они выглядят почти одинаково, ничто не нарушает макет.

Но на вашем скриншоте они имеют разные размеры.

Я думаю, что в ваших браузерах установлены разные уровни масштабирования.Пожалуйста, проверьте, если оба на 100%;

0 голосов
/ 19 июня 2019

Чтобы избежать разбивки макета в Chrome, добавьте min-width к col-sm-1 и col-sm2.

HTML с новыми классами: dropdown-container и button-container 

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="checkbox.css">
</head>

<body>
  <main role="main">
    <div id="boottom-page" class="container-fluid">
      <div class="row">
        <div class="col-sm-1 dropdown-container">
          <span class="custom-dropdown dropdown-sm">
              <select data-name="change-role">
                  <option>Change role to...</option>
                  <option>User</option>
                  <option>Author</option>
                  <option>Admin</option>
              </select>
          </span>
        </div>
        <div class="col-sm-2 button-container">
          <div>
            <div>
              <button type="button" class="btn btn-info">Change </button>
              <button type="button" class="btn btn-info">Delete</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>

</html>

CSS 

.dropdown-container {
  min-width: 130px;
}

.button-container {
  min-width: 230px;
}
...