Question

    <!DOCTYPE html>
    <html>
    <head>
    <title>Types of Internet Connections</title>
    <style>
    body {
        margin: 0px;
    }

    section {
        border: 3px solid lightblue;
        display: inline-block;
        width: 300px;
        height: 300px;
        overflow: scroll;
        /*vertical-align: top;*/
        margin: 10px;
        padding: 10px;
        background-color: lightgrey;
    }
    h1 {
        padding-left: 25px;
    }
    </style>
    </head>

    <body>
    <section>
        <h1>Dial-up</h1>
        <ul>
            <li><strong>Slower</strong> than other internet connection             types</li>
            <li>Connects through <storng>existing phone lines</storng> using a dial-up modem</li>
            <li>Generally the cheapest option, but requires   <strong>phone service</strong></li>
            <li>Must "<strong>dial up</strong>" to connect to the internet and <storng>disconnect</storng> when done</li>
            <li><strong>Cannot use internet and phone at the same time</strong> (unless there are multiple phone lines)</li>
        </ul> 
    </section>
    // other members，etc
    </body>
    </html>

我正在练习“内联块”，但Safari中有一个意想不到的显示，并且chrome和firefox中的页面显示良好。

Safari出了什么问题，我找不到原因，谁能告诉我？谢谢！

Answer 1

您可以使用vertical-align

试试这个：

.yourclass{
vertical-align: top;
}

Safari显示意外的“错误”，为什么？

1 个答案: