Временные шкалы не отображаются в Safari 5

Question

У меня есть внешний td с двумя float:left Дивы внутри. У меня есть цвет фона для внешнего 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

Упрощаййй Маннн!

Поплавки, упорядоченный список и разбрызгивание псевдоэлементов

Совместимость:

Safari 3.2+ / IE9 + с использованием nth-child и псевдоэлементы или Safari 3.1+ / IE8+ с классами и псевдоэлементами.

• Временная шкала - это отличная возможность использовать упорядоченный список (<ol>); это упорядоченная последовательность событий.

• Создать пули с :before псевдоэлементы в элементах списка

• Позиция с левым и правым плавающим с помощью nth-child, чтобы выбрать нечетные и четные элементы списка. (nth-child поддерживается в 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>