html - 我如何强制 iOS 设备跟随我的 CSS

Question

我正在尝试让 iPhone 遵循我设置的常规 CSS。 Chrome 可以很好地显示它并在“移动 View ”上显示它应该如何显示，但是当我在我的 iPhone 上查看它时，它的显示方式却大不相同

请看下面的截图。

顶部图片:“移动 View ”中的 Chrome。

下图:Iphone6s

将底部图像右侧的下拉箭头与顶部图像进行比较

解决这个问题的最佳方法是什么？

<div class="row SortPanel">
                <div class="col-sm-12 innerSortPanel">
                    <asp:Panel ID="pnlSort" runat="server" CssClass="innerSortPanel">
                        <asp:DropDownList ID="ddlOrderBy" runat="server" OnSelectedIndexChanged="ddlOrderBy_SelectedIndexChanged" AutoPostBack="true" CssClass="form-control input-sm">
                            <asp:ListItem Value="0" Text="Date: sooner - later" />
                            <asp:ListItem Value="20" Text="Date: later - sooner" />
                            <asp:ListItem Value="5" Text="Price: low - high" />
                            <asp:ListItem Value="25" Text="Price: high - low" />
                            <asp:ListItem Value="10" Text="Duration: shorter - longer" />
                            <asp:ListItem Value="30" Text="Duration: longer - shorter" />
                            <asp:ListItem Value="15" Text="Title: A - Z" />
                            <asp:ListItem Value="35" Text="Title: Z - A" />
                        </asp:DropDownList>
                    </asp:Panel>
                </div>
            </div>

CSS:

.form-control {
    display: block;
    width: 100%;
    height: 52px;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #000;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
@media (min-width: 768px){
    .sortPanel {
        padding-right:20px;
    }
    .innerSortPanel {
        float:right;
    }
}

Answer 1

尝试包括 normalize.css .

引用自网站:

Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.

然后您就可以毫无问题地使用自己的 CSS。