浏览器兼容问题(1):某些国家文字从右往左的小括号bug

最新推荐文章于 2019-04-26 19:26:36 发布

waitaction

最新推荐文章于 2019-04-26 19:26:36 发布

阅读量890

点赞数

分类专栏： Web前端文章标签： html bug 浏览器火狐谷歌

本文链接：https://blog.csdn.net/waitaction/article/details/52704620

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

某些国家文字从右往左的小括号bug

先看一段HTML代码

<!doctype html>
<html dir="rtl">
 <head>
    <title>test</title>
 </head>
 <body>
    <span>good (morning)</span>
 </body>
</html>

在谷歌浏览器显示如下：
这里写图片描述

是不是很奇芭呢?小括号变成((这样了。然而在火狐及IE是正常的。

添加以下样式解决该问题

<!doctype html>
<html dir="rtl">
<head>
    <title>test</title>
    <style>
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            span:not(:empty):after {
                content: "i";
                visibility: hidden;
                font-size: 0;
            }
            span:not(:empty):before {
                content: "i";
                visibility: hidden;
                font-size: 0;
            }
        }
    </style>
 </head>
 <body>
    <span>good (morning)</span>
 </body>
</html>

当span标签不是空节点，就往文本前后分别插入一个字母i,然后设置字体大小为0，且隐藏。
由于火狐及IE是正常了，因此添加了-webkit-min-device-pixel-ratio,该样式仅在chrome生效。

waitaction

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容问题(1):某些国家文字从右往左的小括号bug

某些国家文字从右往左的小括号bug先看一段HTML代码<!doctype html><html dir="rtl"> <head> <title>test</title> </head> <body> <span>good (morning)</span> </body></html>在谷歌浏览器显示如下：是不是很奇芭呢?小括号变成((这样了。然而在火狐及IE是正常的
复制链接

扫一扫