1

我有一个外部td，里面有两个float:leftdiv。我有外部的背景颜色，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 中显示的任何建议，或者我该如何解决？

4

1 回答 1

2

简化yyy曼恩！

浮点数、有序列表和少量伪元素

兼容性：

Safari 3.2+ / IE9+使用nth-child和伪元素或 Safari 3.1+ / IE8+ 使用类和伪元素。

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

  • 在列表项上创建带有:before伪元素的项目符号

  • 使用 nth-child 使用左右浮动定位来选择奇数和偶数列表项。（nth-childSafari 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>

于 2014-12-07T16:04:09.800 回答