2

jQueryとcssを使用して簡単な数独デザインを作成しました。デザインはChromeとIE8で見栄えがしますが、Firefox18.0.1では良くありません。

これがフィドルです

私には、問題はCSSのスタイリング（ポジショニング）にあるようです。

 #main>div>div>div>button {
     margin:0;
     border:none;
     background-color:white;
     position:absolute;
     top:0.5px;
     bottom:0.5px;
     left:0.5px;
     right:0.5px;
     color:#1a1a1a;
 }

問題があると思われる場合は、jQueryコードもご覧ください。

4

1 に答える 1

0

問題は、Firefox（Gecko）で置き換えられた要素としてのButtonの動作が原因です。この投稿min-width: -moz-available;で述べたように使用することで、私はこれを解決しました。そして、私の投稿がそのリンクと重複していることに気づきました。

#main>div>div>div>button
{
     min-width: -moz-available;     /* added */
     min-width: -webkit-available;  /* just added(optional for me) */
     min-width: available;          /* optional for me */
     /* other properties */
}

上記のコメントで@axel.michelが述べたように、固定の幅と高さを指定できます。長さがわからない場合は、単にを指定してwidth:100%;height:100%;display:block;ください。

編集1px：パーセンテージで割り当てられた寸法にギャップを持たせたい場合は、以下のプロパティも使用できます。（以下のコメントで@BorisZbarskyが言及しているように）

#main>div>div>div>button
{
     width: -webkit-calc(100% - 1px);
     height: -webkit-calc(100% - 1px);
     width: -moz-calc(100% - 1px);
     height: -moz-calc(100% - 1px);
     width: calc(100% - 1px);
     height: calc(100% - 1px);
     /* other properties */
}
 //Doesn't work in IE8
于 2013-01-27T03:47:25.283 に答える