2017-07-13 9 views
0

私の足は#angularに濡れていて、私のページは#firefoxで動いていません(入力したときにテキストが表示されません。Angular2 CSSの問題

この私の的環境である

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; 
} 

FirefoxはそうではないChromeは、以下の計算されたCSSを作成し

<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> 

これはコンポーネントhtmlです。

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

あなたは、(あなたがhttps://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=previewでそれをベースにできます)Plnkr例を作成していただけますか? – nipuna777

+1

ありがとうございました。 https://plnkr.co/edit/tGKGLMvI8FLyGXvpef85?p=preview plunkerは、角度2の[()]双方向データバインディングでは動作しません。データバインディングを削除する必要があります。それはプランカでうまく動作します。 –

答えて

0

「foundation-flex」のCSSフレームワークが問題だと思います。私がスタイルシートCDnを削除したらうまく動作します。質問がもう少し明確になるよう

![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)