我有一个外部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>•</b>
<br /><br />
<p>College</p><b>•</b>
<br /><br />
<p>Started Work</p><b>•</b>
<p>Still Working</p><b>•</b>
</div>
<div class="tlright">
<br /><br /><br /><br />
<p>Primary School</p><b>•</b>
<p>Masters & Diplomas</p><b>•</b>
<p>Coding Again</p><b>•</b>
<br /><br />
<p>Still Coding</p><b>•</b>
<br />
</div>
</td>
</tr>
</table>
对于那些喜欢检查的人来说,这是一个JSFiddle 。上面的样式有点偏离,因为我已经删除了所有不必要的额外内容。这是我可以创建的最小的完整可行示例,它重新创建了问题,但我仍然不明智。
关于为什么内部 div 没有在 Safari 5 中显示的任何建议,或者我该如何解决?