✔ Wieso greift in diesem Fall max-width: 100% nicht?

J

jeipack

Erfahrenes Mitglied
Ich habe ein relativ verschachteltes HTML wo max-width: 100% nicht greifft, wenn ich aber width auf 100% greifft es.

ich konnte es nicht genau nachbauen, aber das hier kommt recht nahe ans Problem:
http://jsfiddle.net/uvbfo8np/

Wenn man beim input width auf 100% setzt, dann funktioniert es, aber max-width: 100% wird irgendwie einfach ignoriert. Hat wer eine Ahnung wieso?
 
Der Browser setzt für fieldset: min-width: -webkit-min-content;
und das führt dann zum Problem.
Leider kann man bei firefox min-width von fieldset nicht überschreiben (es wird einfach ignoriert).
Also muss man für fieldset display: table-cell setzen..
 
Vielleicht reicht es ja so auch
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arbeiten</title>
<style>

input {
  width: 100%;
}
form {
width:100%;
  border:1px solid #000;
}
fieldset {
  border:none;
  max-width: 1000px;
}
</style>
</head>
<body>
<form>
  <fieldset>
  <label>blah</label><input />
  
  </fieldset>
</form>
</body>
</html>
 
Hi,
fieldsets zu stylen ist in einigen Browsern problematisch.
Es gibt z.B. auch mit Overflow und Fieldset ein Problem in Firefox.
Eine weitere Möglichkeit wäre ein Div in das Fieldset zu setzen. So hast du das Fieldset für die Semantik und fürs Konstrukt das Div ohne Semantik.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück