h5的横线 | 您所在的位置:网站首页 › html文字两边加横线 › h5的横线 |
这里总结了五种关于文字两边添加横线的方法。 欢迎补充! 最近的项目的设计经常用到文字两边添加横线的方法,这样看上去简洁明了,当然实现的方法也五花八门. 暂且不说哪种方法好,邓爷爷说过不管黑猫白猫抓到老鼠就是好猫. 详细说明 在现代浏览器中浏览,全部可以正常显示. *第一种情况: 是用的标签类名最为多的一个,而实际上会用到这样去写的很少,而且随着伪类的出现,实现起来更加方便,但这个的兼容性好啊... 优: 兼容性强 弊: 繁琐 *第二种情况: 实际上使用:before 跟 :after 伪类写成的,左右比例可以自由调节.但头痛的是IE7一下用不了T T 优: 灵活性高 弊: 兼容性弱 *第三种情况: 这是两个特别冷门的标签 fieldset legend 在W3C里面解释说 fieldset:组合表单中的相关元素 legend为 fieldset 元素定义标题(caption). 据我了解:这两货是HTML4的产物,而在H5之后添加了3个新的属性. 所以这两货兼容性也不差 [说错的地方希望指正] 但是在例子当中, 它们对text-align:center特别不友好, 所以我在IE8- FF Safari Chrome 单独做了hack 优: 兼容性好啊 贤心的layer说明文档页面就有用这个 弊: --- 第四种情况: ...这个可以不说明,就是请求的时候要多一张图片,建议图片做长一些.压缩一下. 我这里用了10001的尺寸,原图957B,压缩之后107B 优: 自己衡量 弊: ---- *第五种情况: 其实也是使用伪类去写的,只不过相比第二种少了一个伪类 优: 自己衡量 弊: IE7下看不到横线了 *第六种情况: 使用:before :after写的 优: 自适应性很好 弊: 兼容性不好,用到flex transform css3写法 如果需要字数限制,可以在a标签加上 .sixth .sixth_main a { padding: 0 15px; flex-basis: 50%; //大小根据字数而定 text-align: center; } 总结一下: 一般情况下,wap端我会使用第二或者第五中 (第六种)兼容性很好,感谢评论区@[深海哥哥]到的(https://www.jianshu.com/u/5e65e759535c)的提示 注意第一、五种情况,文字都是有用白色为背景色的,如果遇到底色为纯色的情况下还可以继续用,但是如果是图片为背景的话,要么切图对准,要么就换种方法吧,少折腾 |
CopyRight 2018-2019 实验室设备网 版权所有 |