Question

我有一个Bootstrap按钮以及一个输入框，在我测试过该页面的每个浏览器中看起来都很完美，除了Mozilla Firefox。这就是它应该是什么样子，它在Safari，IE和Chrome上的作用：

这就是它在Firefox上的样子：

我测试的版本是42，我不确定它在任何其他版本中是否相同。是什么赋予了？这是Firefox中Bootstrap网格布局的常见问题吗？

这里是一个尽可能紧密地再现场景的小提琴：

＆＃13;

.lookup-field {
  background-color: #fff9e5;
  border-right: 1px solid #e5e0ce;
  border-bottom: 1px solid #e5e0ce;
  border-left: 1px solid #b2aea0;
  border-top: 1px solid #b2aea0;
  box-shadow: none;
  padding-right: 3em;
}
.lookup-field-single {
  height: 3em !important;
}
.kb-icon {
  position: absolute;
  z-index: 1000;
  top: 24%;
  right: calc(3.4em + 2%);
  opacity: 0.4;
  cursor: pointer;
  transition: .25s ease-in-out;
}
.kb-icon.vkb-active {
  opacity: 1;
  cursor: pointer;
}
.kb-icon:hover {
  opacity: 1;
}
i.kb-icon {
  text-decoration: none !important;
}
.sign-up-prefooter,
.lookup-submit {
  width: 100%;
  background-color: #4c3d00 !important;
  border-color: #4c3d00 !important;
  color: #ffffff !important;
}
.lookup-submit {
  height: 3em;
}

＆＃13;

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
  <div class="input-group col-md-4 col-md-offset-4">
    <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg lookup-field lookup-field-single" onMouseOver="$(this).focus();" required>
    <i class="fa fa-keyboard-o fa-2x kb-icon" onclick="toggler('virtualkeypad', this);"></i>
    <span class="input-group-btn">
  	<button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="lookup_word();">Lookup</button>
  </span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

＆＃13;

Answer 1

它不是被切断的按钮，而是它所包含的容器。
为.input-group-btn范围指定最小宽度，以使所有按钮可见。

＆＃13;

.lookup-field {
  background-color: #fff9e5;
  border-right: 1px solid #e5e0ce;
  border-bottom: 1px solid #e5e0ce;
  border-left: 1px solid #b2aea0;
  border-top: 1px solid #b2aea0;
  box-shadow: none;
  padding-right: 3em;
}
.lookup-field-single {
  height: 3em !important;
}
.kb-icon {
  position: absolute;
  z-index: 1000;
  top: 24%;
  right: calc(3.4em + 2%);
  opacity: 0.4;
  cursor: pointer;
  transition: .25s ease-in-out;
}
.kb-icon.vkb-active {
  opacity: 1;
  cursor: pointer;
}
.kb-icon:hover {
  opacity: 1;
}
i.kb-icon {
  text-decoration: none !important;
}
.sign-up-prefooter,
.lookup-submit {
  width: 100%;
  background-color: #4c3d00 !important;
  border-color: #4c3d00 !important;
  color: #ffffff !important;
}
.lookup-submit {
  height: 3em;
}
.input-group-btn {
  min-width:120px;
}

＆＃13;

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>

<body>
  <div class="input-group col-md-4 col-md-offset-4">
    <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg lookup-field lookup-field-single" onMouseOver="$(this).focus();" required>
    <i class="fa fa-keyboard-o fa-2x kb-icon" onclick="toggler('virtualkeypad', this);"></i>
    <span class="input-group-btn">
  	<button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="lookup_word();">Lookup</button>
  </span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

＆＃13;

Answer 2

.sign-up-prefooter, .lookup-submit {
    background-color: #4c3d00 !important;
    border-color: #4c3d00 !important;
    color: #ffffff !important;
    width: 100%; /* REMOVE THIS LINE /*
}

所以它变成了：

.sign-up-prefooter, .lookup-submit {
    background-color: #4c3d00 !important;
    border-color: #4c3d00 !important;
    color: #ffffff !important;
}

在Firefox中切断Bootstrap按钮

2 个答案: