1

td内部に 2 つのfloat:leftdivがある外部があります。外側の背景色とtd、内側の 2 つの 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