Einfaches Suchfeld wird anders behandelt in jedem Browser

stimmen
0

Ich bin der Umsetzung ein Suchfeld, das aus einem Eingabefeld besteht, und ein svg-Symbol. Hier ist das aktuelle Browser-Verhalten in Chrome, Firefox und IE11

Chrome - die ideale Version Chrom

Feuerfuchs Feuerfuchs

IE11 (WTF) IE11

Hier ist eine Arbeits Demo des Codes in Frage, auf codepen gehostet.

HTML

<div class=input-wrap>
  <input placeholder=Search… />
  <div class=icon>
    <svg viewBox=0 0 100 100>
      <g transform=scale(4,4)>
        <path d=M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2,9.1zM24,22.4l-7.7-7.7c1.3-1.6,1.9-3.6,1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0,9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7,5.6-1.9l7.7,7.7L24,22.4z></path>
      </g>
    </svg>
  </div>
</div>

CSS

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { position: relative; }

input {
  font-size: 1rem;
  padding: 20px;
  width: 400px;
  outline: none;
  border: 1px solid black;
}

.icon {
  position: absolute;
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
}

Die blaue Grenze stellt die Eltern svg, und die gelbe Grenze ist die svg. Chrome Größen der Eltern svg nach dem svg Inhalt. Firefox macht die Eltern svg das gesamte Suchfeld erstrecken. Ich weiß nicht , was IE vorhat. Ich muss ihr Verhalten vereinen wie Chrome zu arbeiten , während ein Schlüsselmerkmal des Suchfeldes zu halten: Keine Verwendung von Fixlängen! Alles ist rem basiert, was bedeutet , wenn zB die Wurzel font-size zunimmt, wird die gesamte Suchfeld entsprechend skalieren soll. Ich möchte jede JS Beteiligung zu vermeiden.

Alle Vorschläge sind wir sehr dankbar!

Veröffentlicht am 07/11/2018 um 23:34
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Versuchen Sie diesen Code, ich entfernt absolute Positionierung, hinzugefügt Flexbox und bewegt 400px Breite der Mutter:

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { 
  position: relative; 
  display: flex;
  flex-direction: row;
  width: 400px;
}

input {
  font-size: 1rem;
  padding: 20px;
  outline: none;
  border: 1px solid black;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.icon {
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
  height: 2rem;
}
Beantwortet am 08/11/2018 um 03:01
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more