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

发布时间:2019-05-15 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了css – Firefox中具有位置相对和内容绝对错误的表格单元格脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我真的不知道我的代码有什么问题……

细胞相对定位,形状绝对定位.在每个浏览器中它都应该工作,但不是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,.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,你会注意到“添加到收藏夹”的形式相互叠加,但在其他浏览器中它定位得很好.

有关如何使其工作的任何线索,它应该像Chrome,Safari,IE8,……?

编辑

经过一些研究……自2000年以来Firefox就出现了这个问题

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

而他们似乎没有给它一个中指来解决它…在地狱火灾!

解决方法

这是一个修复,它采用修改后的.cell> 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

总结

以上是脚本之家为你收集整理的css – Firefox中具有位置相对和内容绝对错误的表格单元格全部内容,希望文章能够帮你解决css – Firefox中具有位置相对和内容绝对错误的表格单元格所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: