微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Google Chrome浏览器,iframe和所选文字出现了奇怪的问题,文字方向从LTR变为RT

如何解决Google Chrome浏览器,iframe和所选文字出现了奇怪的问题,文字方向从LTR变为RT

在此示例中,如果从右到左选择了输入字段,并且鼠标移过iframe并释放了对iframe的单击,那么当我开始在输入字段中键入内容时,如果光标位于iframe上,则当鼠标光标移动时,文本方向变为RTL使iframe神奇地变成LTR。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="m-2">
        <div class="grid grid-cols-3">
            <div class="lg:col-span-2 w-full">
                <iframe class="w-full" height="960" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="border:0;"></iframe>
            </div>
            <div class="m-4 p-2">
                <div class="lg:col-span-1 w-full">
                    <div class="bg-white border rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
                        <div class="flex justify-center font-bold text-sm">
                        Rename
                        </div>
                        <div class="mb-4">
                        <label class="block text-grey-800 text-sm mb-2" for="name">
                            Name
                        </label>
                        <input class="shadow border rounded w-full py-2 px-3 text-grey-800" type="text" value="Sample text">
                        </div>
                        <div class="flex items-center justify-end">
                            <button type="submit" class="bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold py-2 px-4 rounded">
                              Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

当我将<div class="m-2">替换为<div>时,问题就解决了。问题是为什么?是Chrome的错误吗?

以下是该错误的演示视频: https://streamable.com/cdn1ni

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。