Bootstrap input group error in Safari

Question

When creating a website, I encountered the following problem: in the input panel, input groups are displayed correctly in chrome and other browsers, such as safari custody, etc., but not in safari. Here are images that show the differences.

Chrome:

Safari:

Here is also the html code:

                <label for="username">Username</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" name="username" required="required"> 
                </div>

                <label for="password">Password:</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-lock"></span></span>
                    <input type="password" class="form-control" name="password" required="required"> 
                </div>

I already tried to delete the created css file (style.css), but nothing has changed, so I think it should be related to the download. Does anyone know a solution to this problem?

EDIT:

I tried loading the page on Safari on another Windows PC, and the error was the same. After I tried loading the page on safari on Mac, everything looked fine. So the error should be in Safari version

Answer 1

css:

.input-group-sm>.input-group-addon {
    height: 18px;
}

bootstrap css , !

.input-group-sm>.input-group-addon {
    height: 18px !important;
}