我正在#angular上弄湿我的页面并且我的页面没有处理#firefox(输入文本字段在输入时没有显示任何文本。虽然提交时保留了值。)
这是我的环境
firefox version54.0 64bit
@angular/cli: 1.2.0
node: 8.0.0
os: linux x64
@angular/animation: 4.0.0-beta.8
@angular/animations: 4.2.6
@angular/common: 4.2.6
@angular/compiler: 4.2.6
@angular/core: 4.2.6
@angular/forms: 4.2.6
@angular/http: 4.2.6
@angular/platform-browser: 4.2.6
@angular/platform-browser-dynamic: 4.2.6
@angular/router: 4.2.6
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.6
@angular/language-service: 4.2.6
ubuntu 16.04
角度组件CSS代码
input, textarea {
width:90%;
background-color:#52595B !important;
font-size: 12;
border: none !important;
padding:24px;
box-shadow:none !important;
color:#fff !important;
}
input::placeholder, textarea::placeholder {
color:#95989A;
}
这是组件html
<form #form="ngForm" (ngSubmit)="addProduct(form.value)">
<input type="text" placeholder="Product name" name="title" [(ngModel)]="title">
<textarea placeholder="Product description.." name="description" [(ngModel)]="description" rows="3"></textarea>
<button id="btn" type="submit">Add Product</button>
</form>
Chrome创建了以下计算的css,而Firefox则没有。
input:not([type]), input[type="email" i], input[type="number" i],
input[type="password" i], input[type="tel" i], input[type="url" i],
input[type="text" i] {
padding: 1px 0px;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 13.3333px Arial;
}
答案 0 :(得分:0)
我相信&#34; foundation-flex&#34; css框架就是问题所在。删除样式表后,它可以很好地工作。
![firefox with foundation-flex](https://i.stack.imgur.com/bd8K8.gif)
![chrome with foundation-flex](https://i.stack.imgur.com/mu5Vm.gif)
![firefox without foundation-flex](https://i.stack.imgur.com/O6JXw.gif)