将font-weight更改为bold不显着地更改元素的宽度 [英] change of font-weight to bold is unwantingly changing width of element
问题描述
在为我的网站创建导航栏时，我决定使活动页面标签以粗体显示以用于可用性目的，但是当我更改了 font-weight 元素它只是轻微地使元素更宽，我使用悬停效果的示例，而不是展示我的问题，我从来没有知道一种方法来解决它..
Whilst creating a navigation bar for my site I decided to make the active page tab show up in bold for usability purposes, but when I change the font-weight on the element it only slightly makes the element wider, an example I made using hover effects instead demonstrates my issue and i've never known a way to solve it..
HTML
HTML
<ul id="mainNav">
<li class="navItem">
<a class="navLink" id="activeLink">Link 1</a>
</li>
<li class="navItem">
<a class="navLink">Link 2</a>
</li>
<li class="navItem">
<a class="navLink">Link 3</a>
</li>
</ul>
CSS
* {
font-family: Arial;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
#mainNav {
background: RGB(200, 230, 240);
border-bottom: 1px solid RGB(0, 0, 0);
height: 30px;
margin: 0 auto;
position: relative;
width: 100%;
}
.navItem {
display: block;
float: left;
position: relative;
}
.navItem:last-child .navLink {
border-right: 1px solid RGB(0, 0, 0);
}
.navLink {
border-bottom: 1px solid RGB(0, 0, 0);
border-left: 1px solid RGB(0, 0, 0);
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 15px;
white-space: nowrap;
}
.navItem:hover .navLink {
background: RGB(120, 200, 250);
color: RGB(255, 255, 255);
cursor: pointer;
font-weight: bold;
}
#activeLink {
background: RGB(90, 170, 220);
color: RGB(255, 255, 255);
font-weight: bold;
}
#activeLink:hover {
background: RGB(110, 190, 240);
}
.navItem:hover .subNav {
display: block;
}
推荐答案
$ c> width route这里有另外两种可能性，它是由个人偏好关于你认为他们是否适合。这两个想法的工作原理相同，你使用一个单独的元素来显示粗体状态，这个元素不是（理念一）或（思想二）影响UI的维度。
Other than the width route here are two other possibilities, it's down to personal preference as to whether you think they are suitable or not. Both these ideas work on the same principal, that you use a separate element to show the bold state, and this element either doesn't (idea one) or does (idea two) affect the UI with it's dimensions.
使用伪选择器。这种方法依赖于浏览器支持相当新的进展，：之前和 content：attr（）可靠的。
Use pseudo selectors. This method relies on the browser supporting quite recent advances i.e. :before and content: attr() so probably isn't reliable just yet.
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before# Browser_compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_Compatibility
- https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility
css：
ul {
list-style: none;
}
ul li {
float: left;
}
ul li:hover a {
visibility: hidden;
}
ul li:hover:before {
position: absolute;
font-weight: bold;
content: attr('data-text');
}
标记：
<ul>
<li data-text="one"><a href="#">one</a></li>
<li data-text="two"><a href="#">two</a></li>
<li data-text="three"><a href="#">three</a></li>
</ul>
另一个是更简单一点，虽然它依赖于preup你的标记第一—那些使用屏幕阅读器的人可能会理解不喜欢你的网站;除非您能找到隐藏其重复文字的好方法。
The other is a bit more straight-forward, although it relies on preping your markup first — and those who use screen readers may understandably dislike your site; unless you can find a nice way to hide the duplicate text from them.
标记：
<ul>
<li><a href="#">
<span class="a">one</span>
<span class="b">one</span>
</a></li>
<li><a href="#">
<span class="a">two</span>
<span class="b">two</span>
</a></li>
<li><a href="#">
<span class="a">three</span>
<span class="b">three</span>
</a></li>
</ul>
css：
ul {
margin: 0; padding: 0;
list-style: none;
}
ul li {
float: left;
}
ul li a span.b {
visibility: hidden;
font-weight: bold;
}
ul li a span.a {
position: absolute;
}
ul li:hover a span.b {
visibility: visible;
}
ul li:hover a span.a {
visibility: hidden;
}
一天结束时，更好的解决方案是：
At the end of the day the better solutions would be:
- 设置宽度，但我可以理解不要这样做。
- 使用JavaScript来计算尺寸。 / li>
- 选择不同的高亮，不会改变文字的尺寸。
这篇关于将font-weight更改为bold不显着地更改元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
