iPad在文本区域中替代了光标

Question

有人知道为什么会出现这种情况吗？我已经花了2个小时，试图弄清楚为什么iPad上的光标会被移位。看看我的视频：

http://tinypic.com/r/20k6338/7

这是我的CSS：

#newroar-ipad {

position: fixed;

display: block;

opacity: 0;

left: 5px;
top: 0px;

height: 480px !important;
width: 550px !important;
margin-top: 30px;

pointer-events: none;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CCCCCC));

z-index: 4;

-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 4px 5px #000;

-webkit-transition: -opacity 0.0s ease-out;
-webkit-transition-duration: .4s;

-webkit-transform: translate(0px, -20px);


}

#newroar-ipad.show {

opacity: 1.0;
pointer-events: auto;
z-index: 4;

-webkit-transition-duration: .4s;
-webkit-transform: translate(0px, 15px);

}

#newroar-ipad-content-header {

margin-top: 10px;

z-index: 4;

width: 548px;
height: 55px;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEBEB), to(#CCC)); 

border: 1px solid #CCC;

}

#newroar-ipad-content {

margin-top: 0px;
margin-left: 2px;

background: none;

top: 0;

width: 542px;
height: 400px;

z-index: 4;

}

.newroar-inputfield {

-webkit-appearance: none;

height: 20px !important;
width: 90%;
margin-left: 18px;
margin-bottom: 10px;

background: #FFF;

color: #666;
font-size: 12px;

border-style: none;
padding: 10px;

-webkit-border-radius: 5px !important;

}

.newroar-textarea {

-webkit-appearance: none;

width: 90%;
height: 120px;
margin-left: 18px;
margin-bottom: 10px;

background: #FFF;

color: #666;
font-size: 12px;

border-style: none !important;
border: none !important;

padding: 10px;

-webkit-border-radius: 5px !important;
-webkit-box-shadow: none !important;
outline: none !important;

}

.newroar-selectfield {

font-size: 14px !important;

height: 30px !important;
width: 300px !important;

margin-left: 18px !important;
margin-top: 25px !important;
margin-bottom: 25px !important;



}

您可以看到，我已经尝试在CSS文档中使用!important，以防它会为其他表单元素带来样式，我还尝试了-webkit-appearance来查看是否可以解决问题...但都没有成功。 =(

感谢您可能提供的任何建议！

- Lord Varlin

---

在你的问题中加入一个 jsfiddle 或者简单的 HTML 代码片段可能会有所帮助。 - Simon

天啊，你使用这么多!important声明的原因是什么？如果有某些边缘情况需要这样做，那就没问题了（也许你正在覆盖用户生成的样式之类的），但如果没有，请研究一下!important并尽量避免使用它。一般来说，除非在非常罕见的情况下，否则您不应该需要使用它。无论如何，如果没有演示，我唯一能想到的就是为字段设置不同的行高。 - Louis L.

Answer 1

你可以尝试使用position:absolute，而不是fixed

#newroar-ipad {
position: absolute;
/* other style codes */
}

因为 iOS 通常会将聚焦的输入框移动到键盘上方。看起来，position:fixed 代码将其带回了原始位置。

- syed imty