Firefox在一个带有display：table-cell的项目中的绝对位置问题

I have 3 li's that I am trying to line up horizontally and then position a span inside each of the li's.

我有3个li,我试图水平排列,然后在每个li的内部放置一个跨度。

The spans get positioned correctly in Chrome but are well outside the boundary of the li's in Firefox.

跨度在Chrome中正确定位,但远远超出了Firefox中的li的边界。

http://jsfiddle.net/brendan_rice/mPnCh/1/

Can anyone help please?

有人可以帮忙吗?

<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;
}

3 个解决方案

#1

use position relative for blank-slate-steps div.

使用position-relative为blank-slate-steps div。

#blank-slate-steps {
    background-color: #E8E8E8;
    bottom: 0;
    font-family: OpenSansCondensedBold,sans-serif;
    text-align: center;
    width: 100%;
    position: relative;
}

#2

Ok, I've made it work, you can do it like this : fiddle

好吧,我已经成功了,你可以这样做:小提琴

Explanation: What I did was, I used position: relative; for #blank-slate-steps and than used position: relative; again for div and wrapped the <li> content inside it

说明:我做的是,我使用的位置:相对;对于#blank-slate-steps而不是使用position:relative;再次为div并将

内容包装在其中

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;
}

#3

Try to put your span in first like that:

试着把你的跨度放在第一位:

<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>

and put the span in position:relative and float:left

并将跨度放在位置:relative和float:left

#1