[英]Firefox issue with position absolute inside an item with display: table-cell
我有3個li,試圖將它們水平對齊,然后在每個li內放置一個跨度。
這些跨度在Chrome中的位置正確,但在Firefox的li邊界之外。
http://jsfiddle.net/brendan_rice/mPnCh/1/
有人可以幫忙嗎?
<div id="blank-slate-steps">
<ul>
<li class="first">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="second">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
<li class="third">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</li>
</ul>
</div>
的CSS
body{
padding-top: 300px;
}
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
}
#blank-slate-steps li {
display: table-cell;
max-width: 300px;
padding: 40px;
position: relative;
width: 300px;
}
#blank-slate-steps h3 {
font-size: 1.6em;
margin-bottom: 0.6em;
}
#blank-slate-steps h3 em {
color: #878787;
float: left;
font-size: 0.8em;
font-style: normal;
margin-bottom: 4px;
text-transform: uppercase;
width: 100%;
}
#blank-slate-steps li.second span {
background: red url("../images/sprite/icons-grey-38.png") no-repeat scroll 0 -56px transparent;
height: 37px;
width: 36px;
}
#blank-slate-steps span {
background-color: red;
display: block;
height: 20px;
left: -10px;
position: absolute;
top: 50px;
width: 20px;
}
使用相對位置作為空白面板步驟div。
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}
好的,我已經使它起作用了,您可以這樣操作: 小提琴
說明:我所做的是,我使用的是position: relative;
#blank-slate-steps
和使用position: relative;
再次為div
並將<li>
內容包裝在其中
的HTML
<div id="blank-slate-steps">
<ul>
<li class="first">
<div style="position: relative;">
<h3><em>Step 1</em>Create Something</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="second">
<div style="position: relative;">
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
<li class="third">
<div style="position: relative;">
<h3><em>Step 3</em>Create Final Thing</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
<span></span>
</div>
</li>
</ul>
</div>
的CSS
body{
padding-top: 300px;
}
#blank-slate-steps {
background-color: #E8E8E8;
bottom: 0;
font-family: OpenSansCondensedBold,sans-serif;
text-align: center;
width: 100%;
position: relative;
}
#blank-slate-steps li {
display: table-cell;
max-width: 300px;
padding: 40px;
width: 300px;
}
#blank-slate-steps h3 {
font-size: 1.6em;
margin-bottom: 0.6em;
}
#blank-slate-steps h3 em {
color: #878787;
float: left;
font-size: 0.8em;
font-style: normal;
margin-bottom: 4px;
text-transform: uppercase;
width: 100%;
}
#blank-slate-steps li.second span {
background: red url("../images/sprite/icons-grey-38.png") no-repeat scroll 0 -56px transparent;
height: 37px;
width: 36px;
}
#blank-slate-steps span {
background-color: red;
display: block;
height: 20px;
left: -10px;
position: absolute;
top: 50px;
width: 20px;
}
嘗試像這樣先將您的跨度放在首位:
<li class="second">
<span></span>
<h3><em>Step 2</em>Create Something Else</h3>
<p>Once you have created Something Else you can Create Final Thing</p>
</li>
並將跨度放在position:relative
和float:left
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.