首页新闻找找看学习计划

中文字体overflow可能存在的问题

0
悬赏园豆:50 [待解决问题]

看到一个新颖的链接样式,代码如下:

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
        a{
            display: inline-block;
            position: relative;
            font-size: 2em;
            text-decoration: none;
            padding: 6px 0;
            color: rgba(0,0,0,.2);
            border-top: 3px solid rgba(0,0,0,.2);
        }
        a::before{
            display: block;
            content: attr(data-hover);
            text-align: left;
            position: absolute;
            color: black;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: 6px 0;
            max-width: 0;
            border-bottom: 3px solid black;
            transition: max-width 0.5s;
        }
        a:hover::before{
            max-width: 100%;
        }
</style>
        <a herf="#" data-hover="LADYMANA">LADYMANA</a>
        <a herf="#" data-hover="中文字体">中文字体</a>

出现的问题:

  1.中文字所在的伪元素的高度不固定,需要指定高度(height: 1em);

  2.中文字体会出现闪烁的现象,如下图:

希望回答叙述的详细点,本人刚接触这方面。

carryme15的主页 carryme15 | 初学一级 | 园豆:156
提问于:2016-08-23 11:08
< >
分享
所有回答(3)
0

每个浏览器都是这样吗?

爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-23 14:02

chrome和firefox都会出现这种情况

支持(0) 反对(0) carryme15 | 园豆:156 (初学一级) | 2016-08-23 17:41

@carryme15: 我也实验了一下,确实都这样,我去找了点资料,说:data是自定义属性,一般只使用与英文字符是不会出现bug,中文字符就会出现bug,需要用样式来限制它。

支持(1) 反对(0) 爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-23 20:49

@爱吃的馒头: 带闪烁,效果不完美。有一点很奇怪,第一个汉字是会一点一点出现的,但是后面的汉字只会一个一个出现。

支持(0) 反对(0) carryme15 | 园豆:156 (初学一级) | 2016-08-23 21:51

@carryme15: 这就是中文字符的bug,我还没找到解决的办法,抱歉啦!

支持(0) 反对(0) 爱吃de馒头 | 园豆:255 (菜鸟二级) | 2016-08-23 22:01
0

你可以试一试其他浏览器,有可能是浏览器 不兼容,也有可能是你的代码某个地方写错了仔细检查一下。

大脸猫先生 | 园豆:206 (菜鸟二级) | 2016-08-26 16:48
0

transition: max-width 0.5s;你可以用一些其他的动画,这个动画会影响的中文划过

God年 | 园豆:219 (菜鸟二级) | 2016-08-30 16:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册