浏览器兼容一直以来是很多人很头疼的问题，特别是一些很隐蔽的私有属性，常常让我们很苦恼。最近做一个外贸平台的时候刚好遇到了这个棘手的问题。Google将小于12px的英文字体强制显示为12px，这对志在兼容所有浏览器的我来说是一个不可忽视的问题。关于这个问题，请教了很多的高手，他们都说不知道，因为平时都很少做外贸平台，所以对于这个BUG他们不是很清楚。于是上网查资料，发现这是Google怕字体太小了，用户看不清楚，这个BUG让人觉得很无语，特别是像我们这种前端制作者。随后找到一些方法，比如改变字体，因为不同的字体在浏览器下面显示会有一定的区别，但是这种方法不怎么行得通。还有一种方法是通过自己制作字体来代替默认字体，但是原理其实和第一种方法一样，行不通。最完美的办法是改变Google内核的一个属性，具体代码如下：body,table,pre {-webkit-text-size-adjust:none; font: 11px/1.231 Arial,Helvetica,clean,sans-serif;}。关键就在于这个属性-webkit-text-size-adjust:none;至此，困扰我半个月的问题终于解决了。
转载于：http://my.68design.net/28075/blog/11109.html
分享到：
相关推荐
Chrome下，设置小于12px字体，显示仍为12px, 这个不知道算不算Chrome的BUG，有人说他是人家臣Chrome的人性化设置，因为小于12px的文字会比较难看得清楚，不过有时项目需要设置小于12px的文字大小。 不去讨论是否是...
使用 zoom 来支持小于 12px 的字体代码如下： ```css .span1 { font-size: 12px; display: inline-block; zoom: 0.8; } ``` 需要注意的是，Zoom 并不是标准属性，需要考虑其兼容性。 2. -webkit-transform:scale...
` 可以强制不进行字体缩放，从而实现小于12px的字体效果。但自Chrome 27以后，这个属性被废弃，因此不再有效。 当 `-webkit-text-size-adjust` 不再可用时，开发者转向了使用CSS的 `transform` 属性。谷歌浏览器...
这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10
但在实践中，当图标尺寸小于等于16px或复杂度较高时，特别是在PC上，iconfont可能会出现明显的锯齿现象，特别是在Chrome浏览器中。这是因为字体渲染机制导致的，尤其是在低分辨率和小尺寸下，字体渲染效果不尽如人意...
这通常通过媒体查询（Media Queries）实现，比如`@media screen and (max-width: 768px)`，针对小于768px宽度的设备设置特定样式。 6. **清除浮动**：为了避免父元素因浮动元素而高度塌陷，可以使用`clearfix`类或`...
`来缩小文字大小，但这种方法可能会影响到其他浏览器的表现，因此建议尽量不使用小于12px的字体。 #### CSS优先级 1. **权值计算**：CSS选择器的优先级取决于它们的组合和类型。一般来说，标签选择器的权值为1，类...
21. **Chrome字体小于12px**：可通过CSS缩放或其他方法实现小字体显示。 22. **rem vs em**：rem相对于根元素的字体大小，em相对于父元素，影响响应式设计中的字体缩放。 23. **webkit表单placeholder颜色**：可以...
在这个项目中，你将学习如何使用CSS来实现Google首页的视觉效果，比如颜色、字体、布局和响应式设计。你可以通过选择器（如元素选择器、类选择器、ID选择器等）来定位HTML元素，然后设置样式属性，如`color`、`font-...
使用Web安全字体（即大多数设备都内置的字体）可以确保所有用户看到一致的字体显示，或者使用Web字体服务（如Google Fonts）引入额外的字体。 综上所述，"04.02-206-font-colors-starter" 项目将指导学习者如何使用...
解决方法是重置样式或将`li`设置为`display: inline-block`。 **14、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？** - **兼容性问题**：包括IE的盒模型问题、透明PNG支持、CSS3新特性...
例如，`@media (max-width: 600px)`针对宽度小于600px的设备定义样式。 6. **交互效果**：使用`:hover`、`:active`和`:focus`伪类来添加鼠标悬停、点击和焦点状态下的样式变化，提升用户体验。还可以添加过渡(`...
这里有一个需要注意的“坑”，就是浏览器对于font-size有一个最小值限制，例如在谷歌浏览器中默认最小值是10px。如果设置的font-size小于这个值，浏览器将不会继续缩小字体大小，这就限制了我们使用JavaScript动态...
例如，当屏幕宽度小于600px时，可以调整元素的排布。 7. **链接和按钮行为**： 虽然这个项目主要是关于视觉设计，但了解如何设置链接（`<a>`标签）和按钮（`<button>`或`<input type="submit">`）的行为也很重要。...
例如，`@media (max-width: 768px)`可以针对宽度小于或等于768px的设备设置样式。 四、JavaScript交互 虽然静态网站不依赖服务器端脚本，但可以使用JavaScript添加一些交互功能，如表单验证、动态效果和导航菜单。...
对于更小的设备，如手机屏幕（小于等于480px），可以调整头部高度、字体大小，甚至隐藏某些元素，以适应更小的屏幕。 媒体查询的基本语法如下： ```css @media only screen and (max-width: 980px) { /* 当视口...