Safari displaying an Unexpected “error”, why?

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>

I was practicing "inline-block", but there is a unexpected display in Safari, and the page in chrome and firefox is well displayed.

What wrong with Safari, i can't find the reason, can anyone tell me? thank you!

Post your actual code please, not pictures of it. – j08691 Dec 15 '15 at 16:42 — j08691, Dec 15 '15 at 16:42
Only image style code, only hardcore ! :) – Narek-T Dec 15 '15 at 16:55 — Narek-T, Dec 15 '15 at 16:55
I have posted my actual code. :) – Vayne Dec 15 '15 at 17:23 — Vayne, Dec 15 '15 at 17:23

score 1 · Answer 1 · answered Dec 15 '15 at 16:41

1

You can use vertical-align

Try this:

.yourclass{
vertical-align: top;
}

answered Dec 15 '15 at 16:41

Luís P. A.

9,524
2
23
36

"vertical-align: top" fixed my Safari error, but could you tell me the reason? – Vayne Dec 15 '15 at 16:48
Because inline-block is a inline element, and inline elements side by side are and can be vertical align by this rule – Luís P. A. Dec 15 '15 at 16:51
could you tell me why my Safari made this unexpected "error"? – Vayne Dec 15 '15 at 16:55
I really don´t know a lot of safari, but maybe the browser default is `vertical-align: bottom` or there is no vertical at all and gets to the bottom – Luís P. A. Dec 15 '15 at 16:59
Could you tell me how can i get the browser(e.g. Safari, Chrome, Firefox) default settings of html element? – Vayne Dec 15 '15 at 17:17
Check this out: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements – Luís P. A. Dec 15 '15 at 17:22

Safari displaying an Unexpected “error”, why?

1 Answers1