Firefox中的引导按钮被切断答案

【问题标题】：Bootstrap button cut off in firefoxFirefox中的引导按钮被切断
【发布时间】：2015-12-04 21:12:44
【问题描述】：

我有一个引导按钮和一个输入框，它在我测试过的所有浏览器（除了 Mozilla Firefox 之外）中看起来和工作都很完美。这是它应该看起来的样子，它在 Safari、IE 和 Chrome 上是这样的：

这就是它在 Firefox 上的样子：

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

这是一个尽可能接近地再现场景的小提琴：

.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;
}

<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>

【问题讨论】：

提供一个工作小提琴或 sn-p 代替屏幕截图，更有用。阅读这篇文章：blog.stackoverflow.com/2014/09/… 和这篇文章：stackoverflow.com/help/mcve
“我测试的版本是 38.4.0”——找不到更古老的东西……？ :p 当前的 FF 版本是 42.0，所以我建议你先检查那个。
@CBroe 刚刚更新了我的浏览器并再次运行测试。结果相同（有问题的版本也更新了）。

标签： html css twitter-bootstrap firefox

【解决方案1】：

被切断的不是按钮，而是它所在的容器跨度。
为.input-group-btn 设置一个最小宽度以使所有按钮都可见。

.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;
}

<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>

【讨论】：

我对硬编码尺寸很谨慎，因为它可能会影响页面的响应能力。

【解决方案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;
}

【讨论】：

这并没有改变任何东西。 :(