2

これは私の前の質問へのフォローアップです。Firefox でのレンダリングの問題に対処しました。その問題が修正された後、私は明らかに他のブラウザでデザインをテストしました. そして明らかに - どう違うのでしょうか - 今回は IE7 で、さらに別のレンダリングの問題が発生しました。

Internet Explorer 7 でのボタン レンダリングの問題の画像 http://b.imagehost.org/0451/NastySpace2.png

上記の要素の前者は、buttonを含むimgです。後者は をdiv含むimgです。

前者の場合 ( と がある場合button) 、 の境界線と のimg境界線の間にスペースがあります。私はそれを取り除きたいです。imgbutton

CSS:

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}

/* this is a fix for one of the padding issues in IE7 */
button {
    overflow: visible;
}
/* this is a fix for the problem in Firefox linked above */
button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

私を助けてください、私は正直に言って本当に腹を立て始めています. これは、このタグpaddingで遭遇する 3 番目のバグです...button

編集：IE7の問題の根本的な修正、またはsに関連する他のブラウザのバグに関するヒントのいずれかを取得するために、この質問に報奨金を与えています<button>。私は、すべての主要なブラウザーでピクセルごとに同じように、完全に見えるボタンを作成したいと考えています。(PS: IE6 は主要なブラウザーではありません。)

4

5 に答える 5

1

ええと、これに対する修正はないと結論付けなければならないようです - 少なくとも既知の修正はありません。したがって、このスペースを手動で削除する (負のマージンを使用) という選択肢はありませんでした。

buttonこれは、要素が Firefox、Safari、Chrome、Opera、Internet Explorer (IE9、IE8、IE7、IE6 はテストしていません) で同じように見えるようにする修正の完全なリストです。

button img {
    display: block; /* required to get rid of bottom space in many browsers */
    *margin: -1px -1px -3px -1px; /* remove additional space in IE7 */
}

button {
    overflow: visible; /* remove content-size dependent padding in IE7 */
}
button::-moz-focus-inner {
    border: 0;  /* remove inner focus from Firefox. The inner focus takes up */
    padding: 0; /* padding in Firefox even if not focused due to a bug */
}
button:focus {
    outline: 1px dotted black; /* as we removed the inner focus give it an outer focus ring to improve accessibility */
}

圧縮版:

button img{display:block;*margin:-1px -1px -3px -1px}
button{overflow:visible}
button::-moz-focus-inner{border:0;padding:0}
button:focus{outline:1px dotted black}

削除された改行:

button img{display:block;*margin:-1px -1px -3px -1px}button{overflow:visible}button::-moz-focus-inner{border:0;padding:0}button:focus{outline:1px dotted black}

button一貫性のある sを楽しんでください。

于 2010-10-13T15:40:51.477 に答える
0

ボタンにwidth：autoを追加してみましたか？

button {    
    overflow: visible;
    width: auto;
}
于 2010-10-27T21:28:51.373 に答える
0

私はよくボタンを罵倒し、onclickJavascript送信で画像を表示することで問題を解決します。

ハッキー？多分。しかし、それは私が国際銀行のために行った100以上の主要なクレジットカードのウェブサイトにとって許容できる解決策です....そして今日まで、私はこれ以上気の利いたクライアントを見つけていません。

于 2010-10-27T21:36:00.503 に答える
0

<input type="image" />の代わりに を<button />使用し、javascript を使用して、mousedown および mouseup イベントがトリガーされたときに表示される画像を変更することで、この問題を回避します。

試してみてください。大きな頭痛の種から解放されます。

于 2010-10-28T05:54:32.363 に答える
0

display:blockそれで治らないの？vertical-align:bottomimgはどうですか？jsfiddle.net でテストケースをセットアップできますか?

編集：display:blockボタンでそれを行うようです：http://work.arounds.org/sandbox/48/run

編集＃2：頑固ですね..これはうまくいきますか？http://work.arounds.org/sandbox/48

于 2010-10-12T19:32:08.860 に答える