HTML-Code funktioniert nicht in Firefox

Ich versuche, den folgenden Code anzuzeigen. Es funktioniert gut in Chrome und Safari, funktioniert aber in Firefox nicht richtig. Der Code-Link: http://jsfiddle.net/nvarun123/fv4jxo4t/26/HTML-Code funktioniert nicht in Firefox

Html-Code:

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

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

Quelle

2016-07-12 Varun

float: center existiert nicht –

Hier ist ein Trick, um vertikal Mitte Inhalt in ein HTML-Element.

Vertikale Ausrichtung ist immer schwierig mit CSS, aber dieses Snippet ermöglicht es Ihnen, es leicht für eine einzelne Textzeile zu tun. Im Grunde verwenden wir die line-height-Eigenschaft, um einen äquidistanten Abstand am oberen und unteren Rand des Textes zu setzen. Damit dies funktioniert, muss der Zeilenhöhenwert der Höhe des HTML-Elements entsprechen, das den Text enthält.

prüfen diese

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

<p> 
 
    One Liner 
 
</p>

Quelle

2016-07-12 00:25:15

Sie können versuchen, den Input-Tag zu gestalten, um den Wert in der Mitte zu setzen, indem Sie text-align: center; Das hat mit deinem Code für mich funktioniert.

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>

Quelle

2016-07-12 01:36:51

hey gibt es irgendeinen weg der rahmen der box kann entfernt werden? Ich habe versucht, indem ich den Stil = "Grenze: keine;". Aber es funktioniert immer noch nicht. – 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>

Check-out das Snippet Ist das so, wie Sie es wollen?

Quelle

2016-07-12 02:01:40

Antwort

Verwandte Themen