html - Safari 5 中不显示时间轴 div

Question

我有一个外部 td，里面有两个 float:left div。我为外部 td 设置了背景颜色，为内部两个 div 使用了不同的颜色。它在除 Safari 之外的所有浏览器上都按预期工作。在 Safari(适用于 Windows 5.1.7)中，内部 div 及其内容根本不显示。

这是相关的 HTML 和 CSS:

.timeline {
    width: 400px;   
    margin: 0 10px;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    border-radius: 5px;
    background-color: grey;
    border: 6px solid #191919;
    box-shadow: 2px 2px 2px black;
}
.timeline p {
    text-align: center;
    font-weight: bold;
    color: white;
}
.timeline p:hover {
    color: grey;
    cursor: pointer;
}
.timeline p:hover + b{
    color: red;
}
.tlleft {
    float: left;
    width: 49%;
    height: 520px;
    margin-right: 1%;
    background-color: #191919;
}
.tlleft b {
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 60px;
    position:relative;
    font-size: 50px;
    left: 189px;
    top: -55px;    
}
.tlright {
    float: left;
    width: 50%;
    height: 520px;
    background-color: #191919;
}
.tlright b {
    font-family: Arial, Helvetica, sans-serif;
    position:relative;
    font-size: 50px;
    right: 11px;
    top: -55px;    
}

#timelinextra {
    box-shadow: 6px 6px 6px #191919;
    background-color: black;  
    border-radius: 10px;
    margin-right:-300px;
    visibility: hidden;
    margin-top: 200px;
    position:fixed;
    width: 600px;  
    right:50%;
}
#timelinextra a {
    background-color:darkgrey;
    border-radius:10px;
    text-align:center;
    padding-right:2px;
    display:block;       
    margin:10px;
    float:right;
    width:22px;  
}
#timelinextra a:hover {
    background-color: white;
    cursor: pointer;
    color: black;  
}
#timelinextra p {
    margin: 10px 40px;
    clear:both;  
}

    <table style="margin-right:20px;margin-bottom:20px;">
        <tr>
            <td style="vertical-align:top;">
                <!--More content here-->
            </td>
            <td class="timeline">
                <div class="tlleft">
                    <p>Born</p><b>&bull;</b>
                    <br /><br />
                    <p>College</p><b>&bull;</b>
                    <br /><br />
                    <p>Started Work</p><b>&bull;</b>
                    <p>Still Working</p><b>&bull;</b>                    
                </div>                    
                <div class="tlright">
                    <br /><br /><br /><br />
                    <p>Primary School</p><b>&bull;</b>
                    <p>Masters & Diplomas</p><b>&bull;</b>
                    <p>Coding Again</p><b>&bull;</b>
                    <br /><br />
                    <p>Still Coding</p><b>&bull;</b>
                    <br />
                </div>
            </td>
        </tr>
    </table>

这是一个JSFiddle对于那些喜欢检查的人。样式与上面的有点不一样，因为我已经删除了所有不必要的额外内容。这是我可以创建的最小的完整可行示例，它可以重现问题，但我仍然一无所知。

对于为什么内部 div 没有在 Safari 5 中显示或者我该如何修复它有什么建议吗？

Answer 1

简化曼恩!

float 、有序列表和一些伪元素

兼容性:

Safari 3.2+/IE9+ using nth-child 和 pseudo elements或带有类和 pseudo elements 的 Safari 3.1+/IE8+ .

• 时间轴是使用有序列表 ( <ol> ) 的绝佳机会；它是一个有序的事件序列。

• 使用 :before pseudo-elements 创建元素符号在列表项上

• 使用第 nth-child 选择奇数和偶数列表项的左右浮动位置。 ( nth-child is supported in Safari 5 )

• 中心线是用 :before 创建的有序列表元素上的伪元素

完整示例

我没有放置悬停事件，但创建这些事件应该没有问题。

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 400px;
  border-radius: 5px;
  background-color: #333;
  border: 6px solid #191919;
  box-shadow: 0 0 0 5px black;
  overflow: hidden;
  padding: 20px;
  border: solid 1px #EEE;
}
.timeline:before {
  content: '';
  display: block;
  height: 100%;
  width: 8px;
  background: #FFF;
  position: absolute;
  left: 50%;
  top: 0;
}
.timeline li {
  text-align: center;
  width: 40%;
  color: #FFF;
  cursor: pointer;
}
li:before {
  content: '';
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  background: #000;
  border-radius: 50%;
  left: 50%;
  margin-left: -4px;
  transition: background 0.5s;
}
li:hover:before {
  background: #F00;
}
li:nth-child(even) {
  float: right;
  clear: left;
  margin: 20px 0;
}
li:nth-child(odd) {
  float: left;
  clear: right;
  margin: 20px 0 20px;
}

<ol class="timeline">
  <li>Born</li>
  <li>College</li>
  <li>Started Work</li>
  <li>Still Working</li>
  <li>Primary School</li>
  <li>Masters &amp; Diplomas</li>
  <li>Coding Again</li>
  <li>Still Coding</li>
</ol>