Question

在chrome / safari浏览器中，html title属性无法正确对齐。它在firefox上运行正常。

这就是它在firefox上的外观（OK）：http://postimg.org/image/dbniihkv5/ 这是它在chrome（FAIL）上的外观：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>

如何正确对齐？

谢谢。

Answer 1

我担心你无法改变对齐方式，因为它在浏览器的控制之下并且不受CSS设置的影响（除非可能通过一些特定于浏览器的黑客攻击）。参看到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>

Answer 2

在大多数浏览器中，HTML标题不会显示在HTML框架视图中。而是显示在浏览器窗口标题栏或选项卡标签中。因此，并非所有浏览器都实现了方向和标题对齐。它们只是遵循OS语言默认对齐。（即使BiDi方向正确，对齐也遵循系统默认值）

换句话说，无法使用HTML BiDi属性控制HTML标题。

Answer 3

好吧，我不熟悉RTL属性，但我以前从未在body标签中看过它，把它放在html标签中并试试。

<HTML DIR="RTL">

不要忘记您的页面标题。：）

RTL网站上的HTML标题属性对齐方式

3 个答案: