Chrome从右到左的段落出现问题 [英] Problem with Chrome Right-To-Left Paragraphs
问题描述
我最近开始注意到此 Chrome 问题:从右至左div内的表格单元格内的某些段落-从左至左随机显示 正确的.服务器速度越慢，发生的时间就越多(我无法在本地重现该问题)，并且有问题的段落会在刷新页面时发生变化.
I've started noticing this Chrome problem recently: Some paragraphs inside a table-cell within a right-to-left div - are randomly displayed left-to-right. The slower the server, the more it happens (I couldn't reproduce the problem locally), and the problematic paragraphs change upon refreshing the page.
以下是演示该问题的HTML:
Here is a piece of HTML that demonstrates the issue:
<html>
<body>
<div style="direction:rtl;">
<table><tr><td>
<p>
long paragraph
</p><p>
another long paragraph
</p><p>
. . .
. . .
</p><p>
last long paragraph
</p>
</td></tr></table>
</div>
</body>
</html>
您可以在此处观看现场演示: http://gioms.com/zzztest.html (不要忘记刷新几次)
You can see a live demo here: http://gioms.com/zzztest.html (don't forget to refresh several times)
有什么解决办法吗?
已编辑
问题是可重现.您仍然需要一台服务器(可能是本地服务器)，并且可以通过使用开发人员工具"(F12)并在网络"标签/在线"子目录中创建和使用节流阀"来将Chrome设置为模拟慢速连接-tab(例如，30 Kb/s的延迟为0).
The problem is reproducible. You still need a server (which may be local), and you can set Chrome to simulate slow connection by using the "Developer tools" (F12) with creating and using a "Throttle" in the "Network" tab / "Online" sub-tab (e.g., 30 Kb/s with 0 latency).
也不需要HTML表格".
Also no need for an HTML "table".
显然，此问题发生在数据包边界上的段落中.有关捕获该现象的视频，请参见 https://youtu.be/RG8uO0OqUnY .
Apparently the problem occurs in paragraphs on a packet boundary. See https://youtu.be/RG8uO0OqUnY for a video capturing the phenomenon.
推荐答案
经过几天的努力，我发现了一个解决方法，方法是在加载所有内容后在本地刷新所有段落:
After struggling with this for a few days, I've found a workaround, by refreshing all paragraphs locally after everything is loaded:
<html>
<head>
<script>
function refreshParagraphs() {
var paragrahpContent;
var paragraphs = document.getElementsByTagName("P");
for (i = 0; i < paragraphs.length; i++) {
paragrahpContent = paragraphs[i].innerHTML;
paragraphs[i].innerHTML = paragrahpContent;
}
}
</script>
</head>
<body onload="refreshParagraphs();">
<div style="direction:rtl;">
<p>
long paragraph
</p><p>
another long paragraph
</p><p>
. . .
. . .
</p><p>
last long paragraph
</p>
</div>
</body>
</html>
这篇关于Chrome从右到左的段落出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
