Angular2 CSS问题

时间:2017-07-13 23:16:31

标签: angular firefox

我正在#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;
}

1 个答案:

答案 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)