先来看两张图
这两张图分别是CSDN博客和饿了么的网页布局，在一般情况下，他们的布局应该是正常的，但是在这里却出现了不应该有的布局混乱。
原因是可知的：笔者的电脑使用了MacType以及浏览器插件，对浏览器字体以及渲染方式进行了修改，使字体宽度和预期的有出入，导致了布局混乱。
但是这种情况在各个网站都是非常少见的，这说明这种现象在一定程度上是可以避免的，下面有几种技术手段可以修复这种bug。
利用auto
首先来看CSDN博客登陆按钮：
可见，在CSS中明确指定了父元素的width属性，当字体宽度大于设置值时，便产生换行。将CSS修改为
width:auto;问题排除。
使用white-space:nowrap
auto并不是银弹，不能解决所有情况的bug，例如饿了吗首页的bug就不能利用这个来修复。饿了吗产生布局混乱的原因是图中的”45+分钟”比预期多出了1px，导致父元素无法在同一行内容纳下第二个元素。
由于”45+分钟”及其父元素并没有指定width属性，因此对这个元素应用auto不能解决问题，这个时候可以为其指定预期的width值：
width:46px;
此时布局已经恢复，但”45+分钟”被换行，此时再添加如下规则：
width:46px;
white-space:nowrap;white-space:nowrap可以禁止元素换行，从而达到如下效果：
此时网页恢复正常，修复后的饿了吗首页如下所示：
结语
虽然大部分情况下（在同样的浏览器中）网页会有预期的表现，但是谁也不能保证这一点。利用一点点技巧，保证浏览器在字体被修改的情况下也能正常显示，何乐而不为？