Question

我使用jQuery和css创建了一个简单的数独设计。 Chrome和IE8的设计看起来不错，但在firefox 18.0.1中效果不佳。

以下是 fiddle

对我来说，问题似乎在于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代码。

Answer 1

问题是因为Firefox中的Button replaced elments的行为（Gecko）。我使用此post中提到的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

在Firefox中定位

1 个答案: