1488801 - hr height is rendered wrong height

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Eugen Konkov]

Attachment: delete1.jpg

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180712135629

Steps to reproduce:

I am stylizing hr tag:

/* https://stackoverflow.com/a/4151770/4632019 */
.invoice-title + hr {
	height: 3px;
	border: none;
	color: blue;
	background-color: red;
	margin-top: 0px;
}



Actual results:

but it is rendered 4px in height


Expected results:

the hr must have height of 3px not 4px and showed at attached printscreen.

Same page in chrome is rendered correct: hr height is 3px

Comment 1

[Eugen Konkov]

As workaround:

.invoice-title + hr {
	border: none;
	border-bottom: 3px solid red;
	margin-top: 0px;
}

Comment 2

[u554753]

Hi Eugen,

I cannot seem to reproduce the issue with what you've provided. Can you attach the test case as an .html file as an attachment here in Bugzilla?

Comment 3

[Eugen Konkov]

yes. When there only one tag on page it is not reproduceable.

see whole my page. (the google chrome render it as 3px height)

Comment 4

[Eugen Konkov]

Attachment: invoice.css

Comment 5

[Eugen Konkov]

Attachment: invoice.html.ep