- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
why the first two icons’s line-height does not work in chrome? and result in the first two icon is taller than the third icon, how to fix that
https://codepen.io/knight-w/pen/QmeejX
it works well in code pen ,but when i move the code to separate html and css files, the first 2 icons get higher than the third
It’s OK for me in Chrome and Firefox. Is this the only CSS you have? Maybe some other style affects them.
yes , this is the only css , it still shows the first two icon is higher than the third icon both in my chrome and fire fox, it only works normally on code pen….
Are you using any additional css? Maybe bootstrap or some other framework?
no , this is the only css, i just fix it by adding the line “!DOCTYPE HTML”(with angle brackets i can not type it here) to the top of the html, after that the first two icons behave normally, but i don’t know why that will work
but once i remove !DOCTYPE HTML from the top my html page, the first two icons are still higher than the third , i don’t know why that works
Your reference (codepen) and also in firefox and chrome, are working fine for me.
It’s really tough to understand when what you tell is happened only for you and what you give (your reference) is working fine for others.
If icons width or height bigger than the other icons then just fix it manually with setting width and height. That’s the only way i think.
like that i.some-selector{width: put width; height: put height}
without this line “!DOCTYPE HTML” on top of the html file, it will appear