时间轴div没有在Safari 5中显示

Question

我有一个外td，里面有两个float:left div。我有一个外部td的背景颜色，以及内部两个div的不同颜色。除了Safari之外，它在所有浏览器上都能正常运行。在Safari（适用于Windows 5.1.7）中，内部div及其内容根本没有显示。

以下是相关的HTML＆amp; 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

Simplifyyyy Mannn！

浮动，有序列表和一些伪元素

兼容性：

Safari 3.2+ / IE9 + using nth-child和pseudo elements或Safari 3.1+ / IE8 +，包含课程和pseudo elements。

• 时间轴是使用有序列表（<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>