8

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

单元格是相对定位的，而表单是绝对定位的。在每个浏览器中它都可以正常工作，但不能在 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">♥&lt;/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">♥&lt;/label>
        </form>
    </div>
</div>
    </div></div>

这是一个小提琴

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

在 Firefox 中查看，您会注意到“添加到收藏夹”表单相互堆叠，但在其他浏览器中它定位得很好。

有关如何使其工作的任何线索都应该在 Chrome、Safari、IE8+ 中......？

编辑

经过一些研究...... Firefox 自 2000 年以来就有这个问题

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

而且他们似乎没有给出中指来修复它......在地狱火狐中燃烧！

4

3 回答 3

4

这是一个采用修改后的 .cell >div {position:relative} 并将 height:100% 添加到 div 的修复程序。

CSS

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

这是更新的小提琴

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

适用于 FF v22.0

于 2013-08-02T03:38:00.820 回答
0

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

.cell > div { 位置：相对 }

于 2013-02-08T17:49:25.577 回答
0

制作

.row
{
      display: block; 
      position:relative
}

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

于 2013-07-11T03:09:12.493 回答