Question

我有6个按钮，他们在firefox中看起来不错。但他们在铬合金方面处于不良状态。有谁知道如何解决这个问题？

#test {
        text-align: center;
    }

<div id="test">
    <button><img src="http://lorempixel.com/99/99"   width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/100/100" width="100" height="100"/></button>
    <br/>
    <button><img src="http://lorempixel.com/101/101" width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/103/103" width="100" height="100"/></button>
    <br/>
    <button><img src="http://lorempixel.com/98/98"   width="100" height="100"/></button>
    <button><img src="http://lorempixel.com/102/102" width="100" height="100"/></button>
    </div>

Answer 1

最后一个br是chrome中的问题。快速解决方法是在底部添加一个

<强>演示

https://jsfiddle.net/4mL8becz/

<强> HTML

<div id="test">
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
    <button><img src="" width="100" height="100" /></button>
    <button><img src="" width="100" height="100" /></button>
<br>
</div>

Answer 2

<br>可能搞砸了，我会将每对按钮包裹在div中，为我解决chrome中的问题。见下面的jsfiddle

<div id="test">
  <div class="button-wrapper">
    <button><img src="http://lorempixel.com/99/99" width="100" height="100"></button>
    <button><img src="http://lorempixel.com/100/100" width="100" height="100"></button>
  </div>
  <div class="button-wrapper">
    <button><img src="http://lorempixel.com/101/101" width="100" height="100"></button>
    <button><img src="http://lorempixel.com/103/103" width="100" height="100"></button>
  </div>
  <div class="button-wrapper">
    <button><img src="http://lorempixel.com/98/98" width="100" height="100"></button>
    <button><img src="http://lorempixel.com/102/102" width="100" height="100"></button>
  </div>
</div>

#test { text-align: center; }

jsfiddle

Answer 3

如何将按钮浮动到容器中并给它们留出余量？

html，css与中心div。火狐好，铬不好

3 个答案: