[HTML/CSS] V2EX 的活跃度进度条是怎么做到的？

This topic created in 3945 days ago, the information mentioned may be changed or developed.

前两天自己做一个自用的问卷的小程序时候，需要一个图形的进度条，自己做的很麻烦。用了挨着的FLOAT的俩DIV做的，同时要控制俩的宽度。
今天无意看到V2EX有个这玩意就习惯性F12看了一下，就是两个嵌套的3px高度 DIV，不同颜色感觉超级实用代码也好控制。
但是我想自己在测试HTML里复现这个的时候他俩死活就不像V2EX那样重叠到一起去，浏览器chrome 44

V2EX的片段：
<div style="width: 250px; background-color: #f0f0f0; height: 3px; display: inline-block; vertical-align: middle;"><div style="width: 120px; background-color: #ffa800; height: 3px; display: inline-block;"></div></div>

前端比较差劲，也就自己给自己做点自己实用的程序时候才用得着自己写界面
从@livid 这里取取经学点新思路

div

V2EX

3px

17 replies • 2015-08-02 12:14:31 +08:00

P233

Aug 1, 2015

http://html5doctor.com/the-progress-element/

realpg

PRO

Aug 1, 2015

@P233
THX. HTML5的progress我已了解。

主要是之前做的东西还是要对IE8做兼容的，而且说实话那东西我都做出来了就过去了，我这强迫症才是要命的。看到了V2EX的实现方式就想自己试试，自己试试发现试不出来怎么都有毛病那抓心挠肝的赶脚才要命……

dotCom

Aug 1, 2015

@realpg 在嵌套内部的div里加上position:absolute，就能重叠到一起了。

P233

Aug 1, 2015

很抱歉我没仔细看问题。

V2EX 这个进度条能重叠在一起，而自己在 Chrome 下测试时不重叠的原因是，V2EX 这两个元素都继承了上层的 line-height, line-height 有相同的高度。

浏览器处理 display inline-block 元素时，会当做 text 文本处理，所以行高对这类元素也有很大影响。

raincious

Aug 1, 2015

@realpg

外层
position: relative，指定一个高度

内层
position: absolute; width 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0;

然后直接在内层的div上Overwrite掉width就行了。

<div style="position: relative; height: 5px; background: #ddd; border: 1px solid #eee;">

<div style="background: #fff; position: absolute; width: 50%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0;"></div>

</div>

TakanashiAzusa

Aug 2, 2015

@P233 持不同意见。这个应该是inline-block属性本身自带空格间距导致的问题。事实上如果把height值加到12px以上或者子元素`display：block`或者父元素`font-size：0`都可以避免这个问题。

sneezry

Aug 2, 2015

http://codepen.io/Sneezry/pen/KpbqMZ

不知道是不是楼主想要的。

另外inline-block的问题，楼主可以看看我最近写的博客 https://sneezry.com/#!/2015/07/25/位置飘摇不定的inline-block

learnshare

Aug 2, 2015

楼主的思路是错的，不需要控制两个。
右边浅色的那个是背景，宽度 100% 就行了

P233

Aug 2, 2015

@TakanashiAzusa V2EX 这两层 inline-block 元素之间没有 whitespace，相信 LZ 复制源码时也没有断行，所以已经绕过了这个问题吧。

而 V2EX 两层 inline-block 重叠在一起的另一个原因是 DOCTYPE，如果换成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 或者 <!DOCTYPE html> ，不用改 CSS 现在的进度条就会错行。

具体 DOCTYPE 影响的原因，找了很久也没找到明确的答案，都是从坑里绕出来的，希望哪位前辈告知。

realpg

PRO

Aug 2, 2015

@P233
再次感谢这么关注这个问题

发现有问题时候，肯定要进行简单的排错，去除空格，去除空行，追溯继承什么的我都做了，然后仍然坑。我用chrome调试工具去追溯继承，按理说他是渲染器给出的计算样式，按照历史继承的样式什么的都会显示出来，我甚至尝试显示所有渲染css属性，包含内部属性，然后把样式都复制过去，包含父级的样式，仍然无法重现。反而是把这两个div粘贴到dreamweaver里不带任何属性预览就是重合的。

我甚至随便打开20个大网站，把那两个div（因为原文就是内联样式不是类）粘贴到别的网站上的各种层级的位置去，都是错位的，但是粘贴到V2EX的任何一个页面的任何位置，都是重合的……

然后我就想这应该跟全局的比较高级的继承有关，我也尝试一点点追溯上去甚至追溯到了body本身，仍然没搞定，不过我没想到是跟dtd有关。我习惯性新建都是doctype html了

不过后来看了楼上 @dotCom 的提示，确实在内层加个absolute就行了，这是最根本的原因。

然后我强迫症又犯了，确定是这个问题以后，为啥chrome的各级div都没有给出position:absolute的定义，实际在一定的场景下div就会包含隐含的position:absolute

难道是V2EX的DTD XHTML1.0 T 会给某些块元素附带position:absolute属性，但是调试工具本身认为这是理所当然的不予显示？

各位大神回头可以再测测，我这会儿在外面不好测试了……

P233

Aug 2, 2015

@TakanashiAzusa
@realpg

又做了几个实验，V2EX 这种情况应该跟我 4 楼的回复没有关系，只跟 DOCTYPE 有关。

DOCTYPE Transitional 时，inline-block 元素的真实高度是是元素的 height 的值，与 line-height 无关。
DOCTYPE strict 或者 HTML5 DOCTYPE 时，inline-block 元素的真实高度是 line-height 的值，渲染高度是 height 的值，line-height 超出 height 的不分会表现为不可控的上下 margin

@sneezry blog 好像打不开，不知道这个问题有文档解释吗

sneezry

Aug 2, 2015 via iPhone

@P233 我在图灵也发过，但是图灵代码自动折行了，可能会看的有些迷糊

http://www.ituring.com.cn/article/201579

sneezry

Aug 2, 2015 via iPhone

@P233 这个问题和折行联系紧密，最好把代码复制到编辑器里看哪里本来就换行了，哪里是图灵社区自动加的

P233

Aug 2, 2015

这个问题应该跟 position: absolute 没有关系

给元素 position: absolute 时，没有同时给 top right bottom left 等值，默认 top: auto; left: auto，也就是浏览器会一层一层向上查找 position: relative 的父层，没有找到就基于 html 元素，自动计算出这个元素应该显示的位置，一般跟直接父层的位置相同。

realpg

PRO

Aug 2, 2015

@P233
OK学写了
不过也不失为一种解决方案尤其是在doctype不好乱改的情况下。再次感谢……

TakanashiAzusa

Aug 2, 2015 via Android

@P233 诚如11楼所言，不同doctype对inline-block元素的高度解析标准不同，所以会有区别。因此这里重点还是在于inline-block元素的高度判断。inline-block元素默认结尾会有一个whitespace之类的空格，默认字体大小的情况下

TakanashiAzusa

Aug 2, 2015 via Android

手滑没写完就发表了。。
空格符把父元素的高度撑高了，然后子元素默认baseline对齐导致错位。所以这里给子元素top对齐也可以解决这个问题。或者在不定义父元素字体大小的情况下，把height都提高到可以覆盖默认空格符大小的情况下也可以不错位