html - 在 Firefox 上提供与 Safari 相同的宽度

Question

我试图让跨度在 Safari 和 Firefox 上具有相同的宽度。

我的代码可见于:Bootply

看起来像这样:

<div class="container">
<div class="row text-center">
  <div class="col-md-1">    
  </div>
  <div class="col-md-5  text-center">
    <div>               
      <div class="input-group">
      <span class="input-group-btn">
          <button class="btn btn-default" type="button" onclick="codeAddress()">
          <i class="fa fa-map-marker"></i></button>
      </span>
      <input id="address" type="text" class="form-control" placeholder="Enter your address" style="max-width:256px;width:256px;">
     </div>
<br>
           
      <div class="input-group">
        <input type="button" id="useAddress" value="Use address" class="outnowButtonOnGrey" style="width:131px;" onclick="codeAddress()">
        <span style="padding-left:7px;padding-right:7px;max-width:28px;" class="text-center">or</span>
        <input type="button" id="getCurrentLocation" value="Current location" class="outnowButtonOnGrey" style="width:131px;"><!-- 139px padding-left:20px;padding-right:20px;-->
      </div>
    </div>
  </div>
  <div class="col-md-5  text-center">  
    Some text
  </div>
  <div class="col-md-1">          
  </div>
</div>

我已经尝试了 max-width、width、min-width 的各种组合，但无法使跨度的宽度在 Safari 和 Firefox 上相同。

在 Safari 上，我得到了我想要的效果，即两个按钮与上面的输入字段左右对齐。在 Firefox 上，按钮不再右对齐。

Answer 1

span 是内联元素而不是框元素，宽度不适用于样式为“display:inline”的元素，按钮样式为“display:inline-block”——可以宽度设置。所以在按钮上设置宽度。