li liste, geçiş yazı tipi boyutu değiştikçe yer dışına taşınıyor

Question

Kullanıcı, içinde yazı tipi boyutu üzerinde gezindiğinde altı kutudan oluşan bir kutu yaptım, ancak bu örnekte gördüğünüz gibi kutuları taşıyor. Bunu nasıl düzeltirim?

Ayrıca kenarlık boyutu 2px'dir, ancak iki kutunun buluştuğu yerde 4px görünüyor, iki dokunma kenarının üst üste gelmesini nasıl sağlayabilirim (tercihen ekran yeniden boyutlandırıldığında bu durum kafa karıştırıcı olacak şekilde negatif kenar boşlukları olmadan).

Yardımlarınız için şimdiden teşekkür ederiz.

https://jsfiddle.net/frw95vdL/

#main-content a { 
color: #000; 
border: #000 solid 2px; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
text-decoration: none; 
-webkit-transition: font-size ease 3s, background-color ease 0.7s; 
-moz-transition: font-size ease 3s, background-color ease 0.7s; 
-o-transition: font-size ease 3s, background-color ease 0.7s; 
transition: font-size ease 3s, background-color ease 0.7s; 
} 

Answer 1

font-size Bunun nedeni ve sana transform: scale() yerine font-size kullanmak bir çözüm öneriyoruz. Aslında bence font-size bunun için kötü bir fikir ve dönüşüm ölçeği daha iyi olacaktır. Kemanına biraz değişiklik yaptım.

#main-content a:hover { 
    background-color: rgba(255, 0, 0, 0.5); 
    transform: scale(1.5); 
} 

jsFiddle