Ein kurzes Verständnis des Fortschrittselements in HTML5 und eine Analyse von Kompatibilitätsproblemen

Dieser Artikel bietet Ihnen eine kurze Einführung in das Fortschrittselement in HTML5 und eine Analyse der Kompatibilitätsprobleme. Ich hoffe, dass er für Freunde hilfreich ist.

1. Grundverständnis des Fortschrittselements

1. Grundwissen

Das Fortschrittselement gehört zum HTML5-Familie und bezieht sich auf die Fortschrittsleiste. Unterstützt von IE10+ und anderen zuverlässigen Browsern.

Hinweis: Internet Explorer 9 und früher unterstützen das 6ecb87e5318a36c03c59e25d55f43372-Tag nicht.

71d6e58a5efafcc435fa9e6ae0aacc69 Label zeigt den Fortschritt der Aufgabe (des Prozesses) an

2. Grundattribute

max , Wert, Position und Beschriftungen.

(1) max bezieht sich auf den Maximalwert. Bei der Standardeinstellung liegt der Fortschrittswertbereich zwischen 0,0 und 1,0. Wenn der Wert auf max=100 eingestellt ist, liegt der Wert zwischen 0 und 100 50, der Fortschritt ist genau die richtige Hälfte. Das Vorhandensein oder Fehlen des Wertattributs bestimmt, ob der Fortschrittsbalken deterministisch ist.

Zum Beispiel hat 6ecb87e5318a36c03c59e25d55f43372a211cb70e7878dbce34a6f8dc0175647 keinen Wert und ist unsicher, sodass es im IE10-Browser wie eine Endlosschleife aus Punktanimationen aussieht ist Das Wertattribut (auch wenn es keinen Wert hat), wie zum Beispiel f3315770236c99e1010432c48985b8a4a211cb70e7878dbce34a6f8dc0175647, gilt ebenfalls als sicher,

(3) Position ist ein schreibgeschütztes Attribut, und die Position des aktuellen Fortschritts ist Wert / Maximalwert. Wenn der Fortschrittsbalken unsicher ist, beträgt der Wert -1

(4) labels ist ebenfalls ein schreibgeschütztes Attribut, und es werden die Label-Elemente erhalten, die auf das Fortschrittselement verweisen. Beispielsweise gibt document.querySelector("progress").labels eine HTMLCollection zurück.

2. Beispiel für die Verarbeitung der Fortschrittselementkompatibilität

<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

CSS-Kompatibilitätscode

progress {
display: inline-block;  
width: 160px;height: 20px;  
border: 1px solid #0064B4;    
background-color:#e6e6e6;color: #0064B4; /*IE10*/}  
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #0064B4; }  
progress::-moz-progress-bar { background: #0064B4; }  
progress::-webkit-progress-bar { background: #e6e6e6; }  
progress::-webkit-progress-value  { background: #0064B4; }

bezogen auf Empfohlen :

Detaillierte Einführung und Kompatibilitätsverarbeitung des Fortschrittselements in HTML5

Das obige ist der detaillierte Inhalt vonEin kurzes Verständnis des Fortschrittselements in HTML5 und eine Analyse von Kompatibilitätsproblemen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!