Question

我在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的布局问题？

Answer 1

在Firefox和Chrome中测试了您的代码。他们看上去几乎一样，没有什么破坏布局。

但是在您的屏幕截图中，它们的大小不同。

我认为您的浏览器中设置了不同的缩放级别。请检查两者是否都在100％上；

Answer 2

为避免Chrome破坏布局，请在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;
}

Chrome正在破坏版面，该如何解决？

2 个答案: