2

我使用 jQuery 和 css 创建了一个简单的数独设计。该设计在 Chrome 和 IE8 中看起来不错，但在 Firefox 18.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

问题是因为 Button在 firefox (Gecko) 中作为替换元素的行为。我通过使用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 回答