3

在 chrome/safari 浏览器上，html 标题属性对齐不正确。它可以在 Firefox 上正常工作。

这是它在 Firefox 上的样子（OK）： 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>

任何想法如何让它正确对齐？

谢谢你。

4

3 回答 3

3

恐怕您无法更改对齐方式，因为它受浏览器控制并且不受 CSS 设置的影响（可能通过某些特定于浏览器的黑客攻击除外）。参照。为输入标签及其标题属性设置不同的方向。

最好的解决方法（嗯，可能比解决方案更好）是使用 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>
于 2013-10-15T12:16:24.543 回答
1

在大多数浏览器中，HTML 标题不会显示在 HTML 框架视图中。相反，它显示在浏览器窗口的标题栏或选项卡标签中。所以并不是所有的浏览器都实现了标题的方向和对齐。他们只是遵循操作系统语言默认对齐方式。（即使双向方向正确，对齐遵循系统默认）

换句话说，HTML 标题不能用 HTML BiDi 属性控制。

于 2013-12-19T11:37:26.080 回答
-1

好吧，我对 RTL 属性不是很熟悉，但我以前从未在 body 标签中见过它，把它放在 html 标签中并尝试一下。 

<HTML DIR="RTL">

不要忘记您的页面标题。:)

于 2013-10-15T10:15:25.453 回答