html/css：鼠标悬停时，通过增加字体大小的链接移动位置_Html_Css_Hyperlink_Hover_Font Size

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

html css hyperlink

html/css：鼠标悬停时，通过增加字体大小的链接移动位置,html,css,hyperlink,hover,font-size,Html,Css,Hyperlink,Hover,Font Size,我想在我的网页中创建一个包含四个链接的html/css菜单（水平位于页面顶部中间）当鼠标悬停在菜单链接上时，我希望菜单链接字体大小增加（a:hover）但我遇到的问题是，当字体大小增加时（在ie8和Chrome中），菜单项的位置会发生变化（稍微降低）我不希望发生这种情况，请注意，我正在使用背景图像（152*52）作为链接我试着做一个表，而不是内联块，但它造成了更大的混乱我还试着玩了margin和padding，但都不起作用我对html/css不熟悉，所以任何关于html/css的建议

我想在我的网页中创建一个包含四个链接的

html

css

菜单（水平位于页面顶部中间）

当鼠标悬停在菜单链接上时，我希望菜单链接字体大小增加（

a:hover

）

但我遇到的问题是，当字体大小增加时（在

ie8

和

Chrome

中），菜单项的位置会发生变化（稍微降低）我不希望发生这种情况，请注意，我正在使用背景图像（152*52）作为链接

我试着做一个

表

，而不是

内联块

，但它造成了更大的混乱

我还试着玩了

margin

和

padding

，但都不起作用

我对html/css不熟悉，所以任何关于html/css的建议都将受到赞赏，请原谅我的英语不好

这是我的密码：

<html>
<head>
<title>Home page</title>
<style type="text/css">

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:132px;
    height: 32px;
    padding: 10px;
    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;
}
</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html">Home</a>
    <a class="menuLink" href="page1.html">Page1</a>
    <a class="menuLink" href="page2.html">Page2</a>
    <a class="menuLink" href="page3.html">Page3</a>
</div>

</body>
</html>


主页
身体{
字体系列：帕拉蒂诺，“古董书”，佐治亚州，加拉蒙德，“新罗马时代”，泰晤士报，衬线；
字体大小：13px；
颜色：#000060；
背景色：#005070；
背景重复：重复-x；
文本对齐：居中；
}
.菜单
{
高度：64px；
宽度：100%；
背景图片：url（img/bglb2.png）；
背景重复：重复-x；
文本对齐：居中；
}
.menuLink，.menuLink:已访问
{
颜色：#FFFFFF；
背景图片：url（img/btk.png）；
文字装饰：无；
字体大小：20px；
宽度：132px；
高度：32px；
填充：10px；
显示：内联块；
左边距：10px；
右边距：10px；
边缘顶部：6px；
}
.menuLink:悬停
{
颜色：#CC7011；
背景图片：url（img/bto.png）；
字号：26px；
}

尝试将固定的

行高添加到菜单链接中（例如，行高：26px；
）
这样，当您增加字体大小时，文本行的高度不会改变。行高
的默认值为正常
，这意味着菜单中每一行的高度都将随字体大小而调整
更多信息：
您可以编辑css类来解决此问题，下面是更新的类：
.menuLink:hover
{
    color:#CC7011;
    background-image:url(img/bto.png);
    font-size: 26px;
    padding:0px 10px 10px 10px;
}

希望它能解决您的问题
将您的HTML代码更改为
 <div class="menu">
 <ul>
   <li><a class="menuLink" href="index.html">Home</a></li>
   <li> <a class="menuLink" href="page1.html">Page1</a></li>
   <li><a class="menuLink" href="page2.html">Page2</a></li>
   <li><a class="menuLink" href="page3.html">Page3</a></li>
</ul>
</div>

我在Chrome
、IE
和win7
上的Firefox
上找到了一个完美的简单解决方案
我在链接中放置了一个带有一个单元格的表（

谢谢大家。不久前我也遇到了同样的问题。
我已对“.menuLink”进行了注释性更改
.menuLink, .menuLink:visited {
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    /* height: 32px; */ /* removed */
    padding: 0 10px; /* changed here */
    line-height: 52px; /* added code */
    display:inline-block;
    vertical-align: middle; /* Added code */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;

    /* In case you have longer 2 words text */
    white-space: nowrap;
    overflow: hidden; /* to hide overflowed text */
}

希望这能对其他人有所帮助，或者如果我的解决方案很好，你可以重新使用你的代码。谢谢你的快速响应，你的解决方案似乎很接近解决我的问题，但我没能解决。我在行高
、填充
和边距
上测试了一些值，但它们对我不起作用。我会测试更多的p可能性..继续尝试不同的线高度值，直到感觉正确为止。它应该会起作用。如果没有，那么我可能误解了问题所在..！那么，您是否使用线高度解决了您的问题？如果是，请不要忘了投票并接受此答案（适用于未来将搜索类似问题解决方案的用户）！如果没有，请在找到解决方案后将其发布到此处！抱歉，我以前尝试过此方法，但它弄乱了链接的背景图像。我已在ubuntu上的chrome和firefox上以及windows7上的chrome、firefox和IE上对其进行了测试，并在此处正确运行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Home page</title>
<style type="text/css">

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;
}
</style>
</head>

<body>
<div class="menu">
    <a class="menuLink" href="index.html"><table class="ml"><tr><td>Home</td></tr></table></a>
    <a class="menuLink" href="page1.html"><table class="ml"><tr><td>Page1</td></tr></table></a>
    <a class="menuLink" href="page2.html"><table class="ml"><tr><td>Page2</td></tr></table></a>
    <a class="menuLink" href="page3.html"><table class="ml"><tr><td>Page3</td></tr></table></a>
</div>

</body>
</html>

.menuLink, .menuLink:visited {
    color:#FFFFFF;
    background-image:url(img/btk.png);
    text-decoration:none;
    font-size: 20px;
    width:132px;
    /* height: 32px; */ /* removed */
    padding: 0 10px; /* changed here */
    line-height: 52px; /* added code */
    display:inline-block;
    vertical-align: middle; /* Added code */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 6px;

    /* In case you have longer 2 words text */
    white-space: nowrap;
    overflow: hidden; /* to hide overflowed text */
}