Closed
Bug 1025447
Opened 12 years ago
Closed 12 years ago
a::first-letter causes miscalculation of text width if combined with display:block or inline-block
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 362880
People
(Reporter: marten.seiplax, Unassigned)
Details
Attachments
(1 file)
|
14.23 KB,
image/png
|
Details |
firefox-bug.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Steps to reproduce:
When applying the CSS selector first-letter on the A-element an extra "padding" is added to the right of the element. This happens if the A-element is also a block or inline-block.
To reproduce create a HTML document, copy and paste the following code:
<html>
<head>
<style type="text/css">
ul.float li {
float: left;
clear:both;
}
.tags a:first-letter {
text-transform: uppercase;
}
.tags a, .tags-no-firstletter a {
border: 1px solid red;
display: inline-block;
padding: 3px 4px;
}
.float .tags a {
display: block;
}
</style>
</head>
<body>
<ul class="tags">
<li>
<a href="my-url">My term</a>
</li>
</ul>
<ul class="tags-no-firstletter">
<li>
<a href="my-url">My term without first-letter</a>
</li>
</ul>
<ul class="float tags">
<li>
<a href="my-url">My term floating block</a>
</li>
</ul>
</body>
Open the html page in Firefox.
Changing the A element in the DOM with Firebug or the built in inspector will cause the element to render correctly.
The bug can be reproduced on Firefox Mac Desktop 30.0 and on the beta release channel (31.0). Same goes for 30.0 for Windows 7.
On Firefox for Android (30.0) the bug can not be reproduced.
Actual results:
See attachment. The first A will get a "padding" on the right (about 14px), even tough the padding itself is defined as only 4px (if it is a display:block combined with float:left the "padding" is even bigger). It is not the padding that is incorrect, but the text element itself. Inspecting the element with the Inspect function shows that the box-model is correctly calculated. The text itself is calculated as wider than it really is.
Expected results:
Expecting that there would be no extra space at the end of the text. See attachment - bullet two illustrates the expected visual appearance.
|
||
Comment 1•12 years ago
|
||
Mårten, thank you for the bug report. This is a longstanding problem which unfortunately requires some pretty fundamental changes to how first-letter is implemented to fix...
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
|
|
Reporter | |
Comment 2•12 years ago
|
||
Ok, thanks Boris. Sorry for not finding the original issue - did not use the correct keywords :) Hope it will be fixed at some point.
You need to log in
before you can comment on or make changes to this bug.
Description
•