FirefoxでHTMLコードが正しく機能しない

次のコードを表示しようとしています。 ChromeやSafariでは正常に動作していますが、Firefoxでは正常に動作していません。コードリンク：http://jsfiddle.net/nvarun123/fv4jxo4t/26/FirefoxでHTMLコードが正しく機能しない

HTMLコード：

<div> 
    <a> 
     <button (click)="decrement()" class="btn btn-primary" style="float: left;"> 
      <span><i class="glyphicon glyphicon-minus" ></i></span> 
     </button> 
    </a> 
    <input type="text" style="width:45%;" [(ngModel)]="count"> 
    <a> 
     <button (click)="increment()" class="btn btn-primary" style="float: right;"> 
      <span><i class="glyphicon glyphicon-plus" ></i></span> 
     </button> 
    </a> 
</div>

CSSコード：ここで

div { 
    position:relative; 
    border: 1px solid #CACEDB; 
    width: 162px; 
    height:38px; 
    overflow: hidden; 
    white-space: nowrap; 
    border-radius:3px; 
} 

input { 
    text-align: center; 
    height:100%; 
    width:100%; 
    border:none; 
} 

input:focus { 
    outline: none; 
} 

button { 
    height:100%; 
    border:none;  
} 

button:hover { 
    background-color: green; 
} 

button:active { 
    background-color: #015191; 
}

出典

2016-07-12 Varun

float：センターが存在しません –

html要素での垂直中央コンテンツへのトリック。

縦書きの整列は、CSSでは常に難しいですが、このスニペットを使用すると、1行のテキストに対して簡単に行うことができます。基本的には、line-heightプロパティを使用して、テキストの上下に等間隔のスペースを配置します。この作業を行うには、行の高さの値を、テキストを含むhtml要素の高さと同じにする必要があります。

チェックこの

p { 
 
    border: red dotted thin; 
 
    height: 100px; 
 
    text-align: center; 
 
    background: black; 
 
    color: white; 
 
    /* magic line */ 
 
    line-height: 100px; 
 
}

<p> 
 
    One Liner 
 
</p>

出典

2016-07-12 00:25:15

あなたはテキスト整列を使用して、中央の値を設定する入力タグのスタイルを設定しようとすることができます

：センター;これはあなたのコードで私のために働いた。

div { 
 
    position:relative; 
 
    width: 160px; 
 
    height:38px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    border-radius:5px; 
 
} 
 
input{ 
 
    text-align: center; 
 
} 
 
input:focus {outline:none;}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    </head> 
 

 
    <body> 
 
    <div> 
 
     <a> 
 
     <button type="button" (click)="decrement()" class="btn btn-primary" style="height:100%; border:none;"> 
 
     <span class="glyphicon glyphicon-minus"></span> 
 
     </button> 
 
     </a> 
 
     <input type="text" style="width:45%;border:none;"> 
 
     <a> 
 
     <button type="button" (click)="increment()" class="btn btn-primary" style="height:100%;float: right; "> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 
     </a> 
 
    </div> 
 
    </body> 
 

 
</html>

出典

2016-07-12 01:36:51

箱の縁を取り除く方法はありますか？私はstyle = "border：none;"のままにしました。しかし、それはまだ動作していません。 – Varun

div { 
 
    position: relative; 
 
    border: 1px solid #CACEDB; 
 
    width: 500px; 
 
    height: 500px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    
 
    <div> 
 
    <a> 
 
     <button type="button" (click)="decrement()" class="btn btn-primary" style="width:50px;height:50px;"> 
 
     <span class="glyphicon glyphicon-minus"></span> 
 
     </button> 
 
    </a> 
 
    <span style="width:100%">1</span> 
 
    <a> 
 
     <button type="button" (click)="increment()" class="btn btn-primary" style="width:50px;height:50px;"> 
 
     <span class="glyphicon glyphicon-plus"></span> 
 
     </button> 
 
    </a> 
 
    </div> 
 
    
 
</body> 
 
</html>

スニペットをチェックアウトこれは、あなたがそれを望むようですか？

出典

2016-07-12 02:01:40

FirefoxでHTMLコードが正しく機能しない

答えて

関連する問題