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

2015-08-01 23:04:03 +08:00
 realpg
前两天自己做一个自用的问卷的小程序时候,需要一个图形的进度条,自己做的很麻烦。用了挨着的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 这里取取经学点新思路
2945 次点击
所在节点    问与答
17 条回复
P233
2015-08-01 23:09:23 +08:00
realpg
2015-08-01 23:13:03 +08:00
@P233
THX. HTML5的progress我已了解。

主要是之前做的东西还是要对IE8做兼容的,而且说实话那东西我都做出来了就过去了,我这强迫症才是要命的。看到了V2EX的实现方式就想自己试试,自己试试发现试不出来怎么都有毛病那抓心挠肝的赶脚才要命……
dotCom
2015-08-01 23:29:33 +08:00
@realpg 在嵌套内部的div里加上position:absolute,就能重叠到一起了。
P233
2015-08-01 23:38:29 +08:00
很抱歉我没仔细看问题。

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

浏览器处理 display inline-block 元素时,会当做 text 文本处理,所以行高对这类元素也有很大影响。
raincious
2015-08-01 23:47:07 +08:00
@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
2015-08-02 00:11:42 +08:00
@P233 持不同意见。这个应该是inline-block属性本身自带空格间距导致的问题。事实上如果把height值加到12px以上或者子元素`display:block`或者父元素`font-size:0`都可以避免这个问题。
sneezry
2015-08-02 00:24:21 +08:00
http://codepen.io/Sneezry/pen/KpbqMZ

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

另外inline-block的问题,楼主可以看看我最近写的博客 https://sneezry.com/#!/2015/07/25/位置飘摇不定的inline-block
learnshare
2015-08-02 00:40:10 +08:00
楼主的思路是错的,不需要控制两个。
右边浅色的那个是背景,宽度 100% 就行了
P233
2015-08-02 08:49:06 +08:00
@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
2015-08-02 09:18:53 +08:00
@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
2015-08-02 09:21:12 +08:00
@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
2015-08-02 09:25:34 +08:00
@P233 我在图灵也发过,但是图灵代码自动折行了,可能会看的有些迷糊

http://www.ituring.com.cn/article/201579
sneezry
2015-08-02 09:27:52 +08:00
@P233 这个问题和折行联系紧密,最好把代码复制到编辑器里看哪里本来就换行了,哪里是图灵社区自动加的
P233
2015-08-02 09:44:34 +08:00
这个问题应该跟 position: absolute 没有关系

给元素 position: absolute 时,没有同时给 top right bottom left 等值,默认 top: auto; left: auto,也就是浏览器会一层一层向上查找 position: relative 的父层,没有找到就基于 html 元素,自动计算出这个元素应该显示的位置,一般跟直接父层的位置相同。
realpg
2015-08-02 09:46:00 +08:00
@P233
OK学写了
不过也不失为一种解决方案 尤其是在doctype不好乱改的情况下。再次感谢……
TakanashiAzusa
2015-08-02 12:10:07 +08:00
@P233 诚如11楼所言,不同doctype对inline-block元素的高度解析标准不同,所以会有区别。因此这里重点还是在于inline-block元素的高度判断。inline-block元素默认结尾会有一个whitespace之类的空格,默认字体大小的情况下
TakanashiAzusa
2015-08-02 12:14:31 +08:00
手滑没写完就发表了。。
空格符把父元素的高度撑高了,然后子元素默认baseline对齐导致错位。所以这里给子元素top对齐也可以解决这个问题。或者在不定义父元素字体大小的情况下,把height都提高到可以覆盖默认空格符大小的情况下也可以不错位

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/210147

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX