在 chrome/safari 浏览器上，html 标题属性对齐不正确。 它在 Firefox 上正常工作。
这是它在 firefox 上的样子(好的):http://postimg.org/image/dbniihkv5/ 这是它在 chrome 上的样子(失败):http://postimg.org/image/c4h8x78nt/
本例代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body dir="rtl">
<img
title="نور روشن است که در پشت موضوع شما و سنسور جلو و عقب از دست رفته است، آن را برای دوربین اول معلوم شد که."
width="200"
height="100"
src="https://www.imagecomics.com/uploads/banners/images/zero_2_large.jpg">
</body>
关于如何使其正确对齐的任何想法？
谢谢。
最佳答案
恐怕你不能改变对齐方式，因为它在浏览器的控制下并且不受 CSS 设置的影响(除非通过一些特定于浏览器的 hack)。比照。至 Setting a different direction for the input tag and its title attribute .
最好的解决方法(嗯，可能比解决方案更好)是使用 CSS(或 CSS+JavaScript)工具提示而不是 title 属性。你会得到很多额外的东西，比如设置字体、大小等的可能性。对齐是自动正确的。示例(使用 jsfiddle ):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.tipped { position: relative; }
.tipped .tip { display: none; position: absolute; right: 1em; top: -3em;}
.tipped:hover .tip {
display: block;
background: #ffe;
color: black;
border: solid 1px #333;
padding: 0.2em 0.3em;
width: 22em;
}
</style>
</head>
<body dir="rtl">
<span class=tipped>
<img
width="200"
height="100"
src="https://www.imagecomics.com/uploads/banners/images/zero_2_large.jpg">
<span class=tip>
نور روشن است که در پشت موضوع شما و سنسور جلو و عقب از دست رفته است، آن را برای دوربین اول معلوم شد که.
</span>
</span>
</body>
关于RTL 站点上的 HTML 标题属性对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19376854/