Google Chrome line-height CSS Bug

[anonymous]

I found a bug and I'm not 100% sure if it is a jQuery bug or a Google Chrome bug.

I make a html page where I have Multiselect jQuery plugin which looks great in Chrome to. Also on that page I have a link that open a jQuery UI modal dialog, also with an Multiselect jQuery plugin in it. But here the text which stands in the selectbox is not valign middle, the text is on the top! In IE it looks good in that dialog, too!

So, now I search for the difference between the box on the main page and the box in the dialog, and Google Chrome have the brilliant developer tools and in this tools I look at the css style of that box at runtime.

And there are differences:

Mainpage box: -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; line-height: 14px;

Dialog box: -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; line-height: normal;

This are the important differences! How could that be?

Best regards

[addyosmani]

Thanks for submitting a ticket to the jQuery project! Unfortunately, we are unable to assist with issues related to jQuery UI or third party plugins.

For assistance with jQuery UI related widgets or issues, please file a ticket on the jQuery UI bug tracker or ask for help in the jQuery forums.

[anonymous]

Here is same question with solution on StackOverflow Use Line-height ​http://stackoverflow.com/questions/10665541/different-line-height-in-firefox-and-chrome-when-using-text-shadow

[Santosh Kori]

Here is same question with solution on StackOverflow Use Line-height ​http://stackoverflow.com/questions/10665541/different-line-height-in-firefox-and-chrome-when-using-text-shadow