CODEWITHSUNDEEP
htmlrenderingcss
coneybeare
coneybeare

Reputation: 33101

Inline-block and line-height rendering differently on Chrome, Safari and Firefox

I style code tags as follows:

 code {
   display: inline-block;
   white-space: no-wrap;
   background: #fff;
   font-size: .8em;
   line-height: 1.5em;
   color: #555;
   border: 1px solid #ddd;
   -webkit-border-radius: 0.4em;
   -moz-border-radius: 0.4em;
   -ms-border-radius: 0.4em;
   -o-border-radius: 0.4em;
   border-radius: 0.4em;
   padding: 0 .3em;
   margin: -1px 0;
   overflow: hidden;
   background-clip: padding-box;
   -webkit-background-clip: padding-box;
 }

and here is how it renders on

I find it strange especially that Chrome and Safari are rendering differently. What can be done here to bring the vertical alignment back to the same baseline as the normal text?

Upvotes: 2

Views: 14620

Answers (2)

Derek Lucas
Derek Lucas

Reputation: 488

Maybe not the same issue, but I recently found that on display: inline-block elements, using line-height causes Safari and Chrome to align things differently. In my situation adding vertical-align: middle causes them to at least align things the same way, allowing me to use line-height to then position things correctly.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

you can also use vertical-align: middle; instead of line-height.

Upvotes: 4

Related Questions