今天我有一个隐藏文本与文本缩进：-9999px规则的问题.我意识到这是由一些已经具有text-align的父元素造成的：对.
Example on jsfiddle.将文本缩进设置为9999px的正值也不起作用.
我设法通过将文本设置为左对齐来隐藏文本,但我不明白为什么会出现这样的问题.
有人可以解释为什么文本缩进不正常,而text-align设置为正确？
ids ids
http://jsfiddle.net/sNbfv/2/
解决方法
看起来保持对齐对于浏览器来说更重要,所以文本的正确边缘保持在右边,无论如何.
该文档设置为ltr方向,因此缩进应用于该行的左侧,但由于您已经表示要将其与右对齐,所以浏览器完全忽略该缩进.我没有解释为什么会发生这种情况,而不是早期浏览器设定了对齐重要性的优先级.只要text-align显式忽略text-indent,CSS规范就没有任何内容.
The Box is indented with respect to the left (or right,for
right-to-left layout) edge of the line Box. User agents must render
this indentation as blank space.
http://www.w3.org/TR/CSS2/text.html#propdef-text-indent
如果我们更新小提琴以获得rtl方向,则缩进确实影响文本的右侧.我添加了一个边框来显示溢出正在发生.
.rtl{direction:rtl;}
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
<div class="rtl">
<div class="parent">
<div class="indented">
Lorem ipsum ipsum!
</div>
</div>
<div class="indented">
Cupcake ipsum!
</div>
</div>
简单的解决方案似乎将嵌套缩进对齐为text-align：left.
.parent { text-align: right; border:1px solid blue}
.indented { text-indent: -9999px; }
.parent .indented{ text-align:left; }
<div class="parent">
<div class="indented">
Lorem ipsum ipsum!
</div>
</div>
<div class="indented">
Cupcake ipsum!
</div>
