为什么HTML5 <progress>栏上的默认样式具有vertical-align?</progress>

时间:2014-10-30 19:35:04

标签: css html5

Webkit的默认样式表将<progress>元素的垂直对齐方式设置为-0.2em。为什么-0.2em而不是0?

1 个答案:

答案 0 :(得分:6)

有趣的问题。根据{{​​1}} documentation,当值指定为长度时,则

  

将给定长度的元素基线与其父元素的基线对齐。

默认情况下,vertical-align元素的高度定义为progress。这意味着使其成为1em可确保进度条与相邻的内联/内联块元素保持完美对齐。

-0.2em
var progress = document.querySelector('progress');
setInterval(function() {
  progress.classList.toggle('va0');
}, 2000);
body {
  font-size: 2em;
}
progress {
  width: 200px;
}
.va0 {
  vertical-align: 0;
}
div:after {
  position: absolute;
  top: 50px;
  content: '<progress> vertical-align: -0.2em';
}
.va0 ~ div:after {
  content: '<progress> vertical-align: 0';
}

尝试制作进度条<progress></progress> Some text. <div></div>,您会发现它的内联邻居旁边看起来不再好看了。