Html CSS：放大字体大小时保持div大小不变

我想在使用鼠标悬停在链接上时放大链接的字体大小，这可以通过CSS代码中的以下行轻松实现

a:hover {font-size:110%}

然而，当链接字体大小增加时，它也会“膨胀”我的链接所在的

的大小，这会“挤压”它下面的div，使整个页面“摇晃”

---

当链接字体变大时，有没有办法保持

的大小不变

您可以使您的

div

具有固定的大小，并且具有

位置：绝对用于您的

HTML

<div id="content">
    <a href="#">Hey there</a>
</div>
<div id="more">More Divs</div>

上面的代码可以工作，但这里有另一个解决方案也可能适用于您。
没有理由使用%，如果有，此文档仍然有效

有两个示例：字体大小作为像素和字体大小作为百分比


HTML

HTML:

查看live
听起来您在
div
的高度上使用了
em
长度值。这通常不是坏事，但如果增加字体大小，也会增加
em
的值。通常
1em=16px

您可以在
div
的
height
属性上使用
rem
长度值。这样就可以使用html根目录的标准字体大小。（只要您没有这样做，
html{font size 35px；}
。这会将
em
的标准值更改为
35px
）

或者你可以去老校，在你的
div
上使用
px
长度值，如果你共享你已经拥有的HTML/CSS会更好。另外，尝试在上述div中添加“overflow:hidden”。所有的解决方案都有效，但我觉得这是最简单、最直观的解决方案
a
{
    font-size:16px;
    position:absolute;

}
a:hover
{
    font-size:110%;
}
#content
{
    position:relative;
    height:20px;
}

<div class="main">
    <div class="content">
        PX
    </div>
</div>

<div class="main">
    <div class="content2">
        %
    </div>
</div>

.main {
    /*Styling for better viweing*/
    background: #000fff;
    float:left;
    height: 100px;
    width: 100px;
}
.content{
     /*Styling for better viweing*/
    background: #ff0000;
    margin: 8px;
    border: #000 1px solid;
    float:left;
    text-align: center;

    /*Set Size of DIV snd font*/
    height:80px;
    width:80px;
    font-size:30px;

    /*Optional to hide overflow*/
    overflow-x:hidden;
    overflow-y:hidden;
}
.content:hover{
    /*Set New Font Size*/
    font-size:80px;
}


.content2{
     /*Styling for better viweing*/
    background: #ff0000;
    margin: 8px;
    border: #000 1px solid;
    float:left;
    text-align: center;

    /*Set Size of DIV snd font*/
    height:80px;
    width:80px;
    font-size:100%;
    line-height:100%;

    /*Optional to hide overflow*/
    overflow-x:hidden;
    overflow-y:hidden;
}
.content2:hover{
    /*Set New Font Size*/
    font-size:800%;
    line-height:110%;
}

<div id="mydiv">
   <a href="#">Link</a>
</div>

#mydiv a {
   display:block;
   font: 16px/30px Arial, Helvetica, sans-serif;
   border:1px solid #CCC;
   padding:10px;
}
#mydiv a:hover {
   font-size: 200%;
}