3

やっと問題の原因がわかりましたが、解決策がわからないので、よろしくお願いします！

ボタンのスタイルを設定しようとしていますが、FireFoxとInternet Explorerでは見栄えがしますが、Chromeでは見栄えがしません。ここでは負のマージンを使用していますが、正のマージンであっても問題は解決しません。

問題を説明するために簡略化されたコードは次のとおりです。

<div style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> div </span>
</div> <!-- DIV works the same in all browsers -->

<button style="display: inline-block;">
    <span style="display: block; margin: -20px; width: 100px; height: 100px;"> button </span>
</button> <!-- BUTTON ignores margins in Chrome only -->

FireFoxで期待される結果は次のとおりです。

期待される

そして、これが私がChromeで見た問題です：

Chromeで実際

自分で見てください：http：//jsfiddle.net/ScottRippey/SZV45/13/

余白が無視されているように私には思えます。ただし、ボタンのマージンの折りたたみを無効にできないようです。
私はもう試した：display: inline-block; position: absolute; margin: 1px; padding: 1px; border: 1px solid white;

何か案は？

4

1 に答える 1

2

ネガを破棄し、 /をmarginに移動(および調整) し、代わりに使用します (例):widthheight.buttonmarginposition

<div class="button">
    <span class="inner"> div </span>
</div>

<button class="button">
    <span class="inner"> button </span>
</button>

.button {
    display: inline-block;
    background: rgba(255,0,0,0.5);
    border: none;
    padding: 0;
    margin: 20px;
    position: relative;
    width: 60px;
    height: 60px;
    vertical-align: top;
}
.inner {
    display: block;
    background: rgba(0,0,255,0.5);
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
}
于 2012-09-13T19:05:33.747 に答える