html - 如何在不重新对齐其他文本的情况下在悬停时更改字体大小？

Question

我想在 css 中使用悬停伪类来增加表中各个链接的大小，但是每次将它们悬停时，大小的增加都会影响行/列的大小，并且表中的所有其他链接都会按照移动.

有什么办法可以只使用css和html来防止这种情况发生吗？

Answer 1

您可以使用 CSS3 转换来缩放链接，而不会导致周围元素的重新定位，例如：

table a:hover{ -webkit-transform: scale(1.2); }

-webkit-可以为其他供应商（例如-moz-和-ms-）更改，但在某些浏览器中不可用，包括 IE8。

使用line-height不会阻止水平移动，因此会扩展列。

Answer 2

你可以这样做：

将初始设置height为line-height.

td {line-height: 20px; font-size: 14px;}
td:hover {font-size: 20px;}

小提琴：http: //jsfiddle.net/mMZjf/

Answer 3

强制line-height高度相同并更改font-size悬停。

这里的例子

Answer 4

您可以使用相对和绝对定位：

a:link {
    display: block;
    font-size: 1em;
    outline: thin solid;
}
a:hover {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3em;
}

有关示例，请参阅此 jsFiddle 。