输入法中表情和小图标的应用

最新推荐文章于 2021-07-24 14:31:34 发布

「已注销」

最新推荐文章于 2021-07-24 14:31:34 发布

阅读量1.8k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/weixin_44595744/article/details/103092222

版权

html 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了输入法表情和小图标在不同浏览器中的应用，包括作为文字显示和伪类的使用。虽然谷歌浏览器兼容性良好，但IE低版本存在兼容性问题。建议在不考虑兼容性时谨慎使用，特别是在涉及CSS3和伪类时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入法表情和小图标的应用

具体的兼容性问题博主下面会说。这里就用表情举例了，小图标我就用伪类试一下了，至于作为文本文字我就不试了，ok，让我们开始吧！！！

将表情和小图标作为文字显示

代码：

<p class="smile">😀</p>

.smile{
        font-size: 50px;
    }

效果图：
在这里插入图片描述

<p class="😀">😀</p>

.😀{
        font-size: 50px;
    }

效果图：
在这里插入图片描述
以上是两种将表情用到文本中的用法，首先谷歌是兼容的，而到了IE11，10，9上的的效果是这样的。

在IE5，7，8的效果是这样的

虽然IE呈现两种稍微不同的结果，但是都差不多，而且还没有兼容性问题，比较好，得出用于文字插入还是不错的。上面两个类的类名，无论是表情还是以smile为类名IE和谷歌的效果都是一样的，所以我是知道连表情都可做类名，将它变成id选择器这种情况，博主没有试，希望各位大佬可以试一下。下面说一下将表情作为伪类取用在谷歌和IE中。

表情和小图标用于伪类

代码：

	<div class="link">
        <a class="√" href="#">true</a>
        <a class="✘" href="#">false</a>
        <a class="🐮" href="#">niu</a>
        <a class="☣" href="#">生化</a>
        <a class="😀" href="#">笑脸</a>
    </div>

以下的css样式我就不一一注释了，出现的比较少和用的少的注释了。

<style>
    /*伪对象选择符*/
    .link a {
        font-weight: bold;
        line-height: 2.8;
        /* 首字母大写样式 */
        text-transform: uppercase;
        text-decoration: none;
        color: #fff;
        display: inline-block;
        margin: .25em;
        padding-right: 1em;
        border-radius: .25em;
        overflow: hidden;
    }
    .link a:before {
        /* 用来获取图标和小表情的类名 */
        content: attr(class);
        background: rgba(0, 0, 0, .375);
        display: inline-block;
        width: 2.8em;
        height: 2.8em;
        margin-right: .875em;
        text-align: center;
    }
    .link .√{
        background: #090;
    }
    .link .✘ {
        background: #c00;
    }
    .link .🐮 {
        background: aqua;
    }
    .link .☣ {
        background: green;
    }
    .link .😀 {
        background: blue;
    }
    </style>

谷歌效果图：
在这里插入图片描述
IE9，10，11效果图：

IE8效果图：

IE7,5效果图：

通过上面的这些不同浏览器和不同版本的相同浏览器可以看出，版本低的IE兼容性不是很好的，所以说如果要是用到css3这些新增的一些样式，或者表情和小图标时，一定要考虑到兼容性问题，就IE这几个版本都有这么多效果，还是少用。

总结

输入法中的小图标和表情用于文本谷歌和IE还是比较友好的，但是一旦用上伪类，而且我只是加了一个color属性，就有好几种效果，而且谷歌和IE11还不一样，所以不推荐用，但是如果项目中或者网站不要考虑到兼容问题，那么可以放心大胆的用，真的一般如果谷歌呈现的效果还是很不错的，这里不是吐槽IE，只是博主自己的见解，大家可以试一下，不过伪类这东西真的好用，但是就要考虑兼容性问题，希望这个能帮到各位大佬。