Question

我试图让iPhone跟随我设置的普通CSS。 Chrome可以很好地显示它并显示它应该如何处理＆＃34;移动视图＆＃34;但是当我在我的iPhone上查看它时显示的方式却有所不同

请看下面的截图。

热门图片：Chrome浏览器＆＃34;移动视图＆＃34;。

底部图片：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是一个可自定义的CSS文件，它使浏览器更加一致地呈现所有元素并符合现代标准。我们研究了默认浏览器样式之间的差异，以便仅精确定位需要规范化的样式。

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

我如何强制iOS设备关注我的CSS

1 个答案: