html css 鼠标移动位置,html / css：悬停鼠标时，用增加字体大小的链接移动位置...

我发现了一个完美的简单解决方案，适用于Chrome，IE和Firefox上的win7。

我在链接()中放置了一个具有相同width和height作为(这是图像尺寸)的单元格。

也做了表：text-align:center。 text-align:center确保表格内的文本将水平居中。并且表格的优点是即使在悬停鼠标时字体大小发生变化，文本也会垂直居中。此外，当字体大小增加时，该表阻止了链接图像和其他链接的移动。

我删除了所有padding。因为如果我将(height，width)与(padding)组合在一起，它将在不同的浏览器上产生不同的结果(尤其是IE和Chrome)。

将内容放入可能是错误的想法，但它确实适用于大多数浏览器。

我还把这行代码作为我的html文件的第一行：

这使得

继承了所有东西，我不知道为什么，但它确实简化了东西。

结果代码是：

Home page

body {

font-family:Palatino, ‘Book Antiqua’, Georgia, Garamond, ‘Times New Roman’, Times, serif;

font-size: 13px;

color: #000060;

background-color: #005070;

background-repeat:repeat-x;

text-align:center;

}

.menu

{

height:64px;

width:100%;

background-image:url(img/bglb2.png);

background-repeat:repeat-x;

text-align:center;

}

.menuLink, .menuLink:visited

{

color:#FFFFFF;

background-image:url(img/btk.png);

text-decoration:none;

font-size: 20px;

width:152px;

height: 52px;

display:inline-block;

margin-left: 10px;

margin-right: 10px;

margin-top: 6px;

}

.menuLink:hover

{

color:#CC7011;

background-image:url(img/bto.png);

font-size: 26px;

}

table.ml

{

text-align: center;

width:152px;

height: 52px;

}

Home

Page1

Page2

Page3

谢谢你们。