首页 文章

iPhone上的奇怪CSS渲染[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我有一个简单的CSS样式按钮： <input class="button" type="submit" value="Join">

...
.header__form-submit .button {
  background: #3371E3;
  border-radius: 0 5px 5px 0;
}
...

@media screen and (max-width: 767px) {
  ...
  .header__form-submit .button {
    width: 100%;
    border-radius: 5px;
  }
}

它可以在桌面，任何浏览器和Chrome中的移动预览中呈现 . 但是，当我在iPhone上打开它时，按钮有圆角 .

Chrome预览：

enter image description here
iPhone Chrome或Safari：

enter image description here

为什么会这样？ iOS上的样式 <input /> 有问题吗？

谢谢

html css iphone

2 回答

  • 0

    禁用默认操作系统样式

    webkit-appearance: none;

    编辑：将此添加到您的CSS

    input {
-webkit-border-radius:0; 
border-radius:0;

    }

    以及以上一行 .

    回复于
  • 1

    要走的路是：

    <button class="button" type="submit">Join</button>

    回复于

相关问题