CSS3 Pie.htc和密码输入字段

时间:2014-03-26 15:32:38

标签: javascript html css3 internet-explorer-8 css3pie

我尝试使用css3pie以便在IE8中添加对边框半径的支持。

我已经为使用border-radius的样式添加了正确的行为,并且它几乎是完美的,除了在将样式应用于密码输入字段时非常小问题,例如

<input name="txtPassword" type="password" id="txtPassword" />

有时它会加载元素,但大部分时间,如果我对其应用PIE.htc行为,密码字段不会在我的文档中呈现。

如果我将控件的TextMode设置为Text,例如type="text"然后它会正常工作但我失去了我之后隐藏密码字段中用户输入的功能。应用于该字段的样式如下:

#login-form input, a.btn-login {
   margin-bottom: 10px;
   width: 320px;
   border-radius: 20px;
   font-size: 18px;
   position: relative;
   behavior: url(../CMSScripts/Custom/PIE.htc);
}

其他人之前使用PIE.htc遇到此问题?你是怎么解决的?

1 个答案:

答案 0 :(得分:0)

好吧所以我一般都有输入这个问题,有时候用css3pie渲染。 如果您在元素上使用相对长度,如em或百分比,则可能无效, 因此,使用PX设置输入元素的长度。

或者您的apache可能无法识别htc扩展名。 所以在你的htaccess文件中添加它:

AddType text/x-component .htc

或者可能是你的PIE.htc的路径是错误的。为了确保我把文件放在我的css文件中。

或者使用以下代码将css添加到输入类型文本中,使其看起来像输入类型密码:

input[type="text"] {
    -webkit-text-security: disc;
/* with this code people won't be able to copy/paste the text in the input */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}

希望我救你!