善用width:auto以及white-space:nowrap以防止布局被打破

先来看两张图

这两张图分别是CSDN博客和饿了么的网页布局，在一般情况下，他们的布局应该是正常的，但是在这里却出现了不应该有的布局混乱。

原因是可知的：笔者的电脑使用了MacType以及浏览器插件，对浏览器字体以及渲染方式进行了修改，使字体宽度和预期的有出入，导致了布局混乱。

但是这种情况在各个网站都是非常少见的，这说明这种现象在一定程度上是可以避免的，下面有几种技术手段可以修复这种bug。

利用width:auto

首先来看CSDN博客登陆按钮：

可见，在CSS中明确指定了父元素的width属性，当字体宽度大于设置值时，便产生换行。将CSS修改为

width:auto;

问题排除。

使用white-space:nowrap

width:auto并不是银弹，不能解决所有情况的bug，例如饿了吗首页的bug就不能利用这个来修复。饿了吗产生布局混乱的原因是图中的”45+分钟”比预期多出了1px，导致父元素无法在同一行内容纳下第二个元素。

由于”45+分钟”及其父元素并没有指定width属性，因此对这个元素应用width:auto不能解决问题，这个时候可以为其指定预期的width值：

width:46px;

此时布局已经恢复，但”45+分钟”被换行，此时再添加如下规则：

width:46px;
white-space:nowrap;

white-space:nowrap可以禁止元素换行，从而达到如下效果：

此时网页恢复正常，修复后的饿了吗首页如下所示：

结语

虽然大部分情况下（在同样的浏览器中）网页会有预期的表现，但是谁也不能保证这一点。利用一点点技巧，保证浏览器在字体被修改的情况下也能正常显示，何乐而不为？

转载于:https://www.cnblogs.com/qs20199/p/4452269.html