Jak rozwiązać problem błędnej interpretacji przez Chrome?
Sprawa dotyczy przycisków w CSS.
Zależy mi na centrowaniu tekstu na przycisku, więc użyłem sposobu display : table-cell.
Pod IE11 wyświetla je prawidłowo,
na środku kontenera w układzie:
przycisk1 | przycisk 2
---------------------------
przycisk 3 | przycisk 4
a pod Chrome wyświetla je doklejone do lewej
strony kontenera w układzie:
przycisk1
-----------
przycisk2
-----------
przycisk3
-----------
przycisk4
Podaję kod:
a.button_metro , a.button_metro:active , a.button_metro:visited { color : white; background-color: #99cccc; display : table-cell; text-decoration: none; text-align : center; font-weight : bold; vertical-align: middle; width : 150px; height : 120px; font-family: Arial; font-size: 16px; outline: ridge; outline-width : thin; outline-color : #aaaaaa; margin: 0 auto; } a.button_metro:hover { background-color: #99cccc; display : table-cell; text-decoration: none; text-align : center; font-weight : bold; color : white; vertical-align: middle; width : 150px; height : 120px; font-family: Arial; font-size: 16px; outline: groove; outline-width : thin; outline-color : #aaaaaa; margin: 0 auto; }