Question

我真的不知道代码的问题是什么......

细胞位于相对位置，形状位于绝对位置。在每个浏览器中它都可以正常工作，但Firefox不能......

表CSS有问题吗？

CSS

.table                              { display: table; width:100%; height:100%; table-layout: fixed; }
.row                                { display: table-row; height: 1px; }
.cell                               { display: table-cell; vertical-align: middle; position: relative; }
.menu .cell                         { width: 33.33%; border: 1em solid #000; font-size: 1.14em;
                                    background: #fff; background-clip: padding-box; vertical-align: top; position: relative; }

.menu .cell header                  { padding:.5em 1em; background-color: #383430; color: #fff; line-height: 1.2; position: relative; }
.menu .cell .content                { padding:2em 1em 3em 1em;}
.menu .cell h3                      { font-size: 1em; text-transform: uppercase; text-decoration: underline; font-weight:300;} 
.menu .cell ul                      { margin: 0; padding: 0; list-style: none; }
.menu .cell li                      { line-height: 1.4; padding:0.25em 0; border-bottom: 1px solid #ecece6;}
.menu .cell li:last-child           { border-bottom: none; margin-bottom: 0;}



.menu .like header:before           { content : 'on aime !'; position: absolute; bottom: 100%; left: 1em; 
                                    text-transform: uppercase; font-size: .8em; padding: 3.5em .5em .5em .5em; border-radius: 1em 1em 0 0; 
                                    background: #dd582a url(imgs/on-aime.png) center .5em no-repeat; box-shadow:  0px 0px 2px 0 rgba(0,0,0,.5); }


.menu .favorite                     { position: absolute; bottom: -.75em; right: -.75em;  display: block; width: 100%; overflow: hidden;}
.menu .favorite input               { position: absolute; top: -30em;}

.menu .favorite label,
.menu .favorite label:before        { background-color: #dd582a; height: 32px; white-space: nowrap;
                                    float: right;  color: #fff; background-image: linear-gradient(#dd582a 50%, #bd5d3b 100%); }
.menu .favorite label:hover,
.menu .favorite label:hover:before{background-image: linear-gradient(#bd5d3b 5%, #dd582a 50%); }

.menu .favorite label               { text-align: center; font-size: 24px; width: 32px; display: block; 
                                    line-height: 28px; border-radius: 4px; cursor: pointer;}

.menu .favorite label:before        { content: "Add to favorite"; display: block; position: absolute; right: 34px;
                                    padding:0 8px; font-size: 14px; line-height:32px  }
.menu .favorite input:checked + label { color: #e77248; background-color: #fff;background-image: linear-gradient(#ffffff 50%, #bfbfbf 100%); }
.menu .favorite input:checked + label:hover{background-image: linear-gradient(#bfbfbf 5%, #fff 50%);}
.menu .favorite input:checked + label:before { content: "Like"}

HTML

<div class="table menu">

    <div class="row">
<div class="cell">
    <div >
        <header>100 $</header>
        <div class="content">
            <h3>Title 1</h3>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </div>
        <form class="favorite">
            <input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
            <label for="bal-menu2">♥</label>
        </form>
    </div>
</div>
        <div class="cell">
    <div >
        <header>100 $</header>
        <div class="content">
            <h3>Title 1</h3>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>
            </ul>
        </div>
        <form class="favorite">
            <input id="bal-menu2" type="checkbox" name="bal-menu2" value="favorite" />
            <label for="bal-menu2">♥</label>
        </form>
    </div>
</div>
    </div></div>

这是一个小提琴

http://jsfiddle.net/warface/8bWUe/2/

在Firefox中查看，您会注意到表单＆＃34;添加到收藏夹＆＃34;彼此堆叠，但在其他浏览器中它定位得很好。

有关如何使其正常工作的任何线索都应该适用于Chrome，Safari，IE8 +等......？

修改

经过一番研究......自2000年以来，Firefox出现了这个问题

https://bugzilla.mozilla.org/show_bug.cgi?id=63895

而且他们似乎没有用中指来解决它......在地狱火炬中燃烧！

Answer 1

这是一个修复，它采用修改后的.cell＆gt; div {position：relative}并将高度：100％添加到div。

<强> CSS

.row { display: table-row; height:100%; }
.cell div {height:100%; position: relative }

这是udpated小提琴

http://jsfiddle.net/8bWUe/19/

适用于FF v22.0

Answer 2

我能够使用以下css将表单放在firefox中：

.cell＆gt; div {position：relative}

Answer 3

制作

.row
{
      display: block; 
      position:relative
}

而不是“table-row” - 这应该可以解决问题。

Firefox中具有位置相对和内容绝对错误的表格单元格

3 个答案: