css样式怎么兼容ie11在IE中无法正常显示

来源：蜘蛛抓取(WebSpider) 时间：2016-11-19 18:02 标签： ie8 显示不出css样式
如何使用IE浏览器自带开发人员工具调试CSS样式
如何使用IE浏览器自带开发人员工具调试CSS样式？
创建日期：日
使用IE浏览器预览表单（本例中使用的是IE8浏览器），并使用F12快捷键打开开发人员工具。如图所示：
1、调试字体及颜色效果
将表单中“调休原因”多行文本中输入的字体修改为楷体，颜色为蓝色举例说明。
选择开发人员工具栏目中，选择左起第一个鼠标指针按钮，然后将鼠标移动到“请假原因”多行文本空白处，点击鼠标左键。当前选中区域的元素和该元素的样式将分别在左右窗格显示出来。如图所示：
在左边窗格中，在选中的蓝色区域style属性值上方点击鼠标左键，此时style内容变为可编辑状态。如图所示：
如需保留原有样式，则需再点击一次鼠标左键，进行属性的添加。如图所示：
在编辑状态下输入“font-family:楷体;color:blue”，最后按ENTER键确认。如图所示：
此时，该多行文本框中便增加了字体和颜色的样式效果。如图所示：
除以上修改原有样式外，也可以在标注区域上方点击右键，选择“添加属性”，单独添加属性样式。如图所示：
2、调试文本居中显示效果
以将表单中“部门意见”多行文本中输入的内容，居中显示为例。按步骤1选中“部门意见”区域。在多行文本标签样式中加入“text-align:”。如图所示：
获取实际的文本显示效果。如图所示：
3、取消调试效果
取消之前调试添加的样式效果。在开发工具右窗格中，取消该元素样式复选框前的勾选即可。如图所示:
取消掉之前所加的调试样式的效果图。如图所示:
注意：此工具供调试网页样式，动态获取网页设计的效果。但是当你在浏览器中重新加载页面时，你所做的任何更改都会丢失。需要将调试好的样式填写到表单的源码对应的位置，并保存。另外若要保存HTML文件，请单击左窗格上的“保存”按钮。查看: 4164|回复: 13
设置CSS样式网页显示异常
本帖最后由 前途無量 于
10:16 编辑
本来想添加CSS强制chrome显示网页字体为特定格式，不过添加之后网页异常出现“口口”形状的字符，求解决方法。
添加自定义css如下：* {
font-family: &Arial&, &Microsoft Yahei&, sans-serif !
pre, code, kbd, samp, var {
font-family: &Arial&, &Microsoft Yahei&, monospace !
}复制代码异常显示如下：
Capture.JPG (5.48 KB, 下载次数: 0)
00:28 上传
正常显示：
Capture.JPG (11.13 KB, 下载次数: 0)
10:16 上传
如果不是像Fx下采用排除网站的话，试试直接用 @font-face@font-face { font-family: Sunicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Sunicode-range: U+F; src: local('Arial')}
@font-face { font-family: NSunicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: NSunicode-range: U+F; src: local('Arial')}
@font-face { font-family: Sunicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Sunicode-range: U+F; src: local('Arial')}
@font-face { font-family: '宋体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '宋体';unicode-range: U+F; src: local('Arial')}
@font-face { font-family: '新宋体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '新宋体';unicode-range: U+F; src: local('Arial')}
@font-face { font-family: '黑体';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: '黑体';unicode-range: U+F; src: local('Arial')}
/* 分别替换，宋体，新宋体，黑体为微软雅黑 */
@font-face { font-family:unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: 'monospace';unicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Cunicode-range: U+2E80-FFFF; src: local('微软雅黑')}
@font-face { font-family: Lucida Cunicode-range: U+2E80-FFFF; src: local('微软雅黑')}
/* 替换常见的等宽字体 */复制代码PS：上述的等宽字体我是随便填的雅黑；按你原来的代码，似乎等宽英文部分变成Arial了，不是非常合理。
Win系统自带的Consolas, Courier New等都是适合编程的等宽字体；免费的也还有很多，如Ubuntu Mono, Source Code Pro等等，都比Arial适合。
感谢解答： ）
本帖最后由 前途無量 于
11:22 编辑
asaa4 发表于
如果不是像Fx下采用排除网站的话，试试直接用 @font-facePS：上述的等宽字体我是随便填的雅黑；按你原来的代 ...
太感谢您的回答了，效果很不错
前途無量 发表于
太感谢您的回答了，效果很不错
不客气，font-face部分以前看过相关的参考资料，我自己不懂CSS的。
问题解决就好！
asaa4 发表于
如果不是像Fx下采用排除网站的话，试试直接用 @font-facePS：上述的等宽字体我是随便填的雅黑；按你原来的代 ...
你好，用你的代码解决更换字体后出现的小框框问题，但是百度新闻和百度网页两个界面宋体不能被替换，其他贴吧什么的替换了，如图
新闻.png (114.59 KB, 下载次数: 0)
13:17 上传
网页.png (139.3 KB, 下载次数: 0)
13:17 上传
贴吧.png (96.46 KB, 下载次数: 0)
13:17 上传
asaa4 发表于
如果不是像Fx下采用排除网站的话，试试直接用 @font-facePS：上述的等宽字体我是随便填的雅黑；按你原来的代 ...
另外又上了些论坛发现有的论坛替换成雅黑了，但是有些还是原版的宋体
请指点下，谢了
回复又不能用了，不知是否能at成功....
你说的有的网页没有被替换成雅黑，我估计应该原因是在网页本身的字体设定问题上。
举例，以你提到的百度主页为例：
*Baidu主页：
字体设定：A
英文显示Arial, 中文显示宋体。
之前我给的@font-face代码你也看到了，是针对设定了网页字体为Simsun等的。
那Arial是什么的？西文字体，不含中文。但百度首页未定义更多字体，又因为是Win系统，猜测根据fallback机制，自动链接到Simsun了（即Arial无法显示的中文，由Simsun来显示了），此时，之前的CSS就不生效了。
再举一例，谷歌主页：
*Google主页：
字体设定：Arial,sans-
英文显示Arial, 中文显示微软雅黑。
英文显示不变。这里先说明一点，Arial为无衬线体，sans-serif也是无衬线的意思。
有一点同之前一样，在Arial里找不到中文，就要找可以用的字体了。这里很巧的是第一原则Arial为无衬线，而且后面是sans-serif，所以理论上会去找同样是无衬线的字体去显示中文。
但宋体是衬线体，而自Vista起雅黑（无衬线体）也算是第二默认显示字体吧，因此中文部分就调用了雅黑显示，让你感觉到CSS“生效”了，其实不然。
当然，当碰到像Sina那样，设定为&SimSun&,&宋体&,&Arial Narrow&,&helvetica&，之前的CSS就生效了。比如你说的贴吧，字体设定为“宋体”，同样生效。
有一个比较笨的解决办法，可以尝试用一个扩展叫Webpage Decorator，可单独设置某页显示字体，下载
_175532.png (80.37 KB, 下载次数: 0)
18:31 上传
_175555.png (20.11 KB, 下载次数: 0)
18:31 上传
版区有你更精彩： ）
本帖最后由 ywzhaiqi 于
19:01 编辑
asaa4 发表于
回复又不能用了，不知是否能at成功....
你说的有的网页没有被替换成雅黑，我估计应该原因是在网 ...
设置默认字体为雅黑就行了
_190103.png (35.9 KB, 下载次数: 0)
19:01 上传
asaa4 发表于
@foxydon 回复又不能用了，不知是否能at成功....
你说的有的网页没有被替换成雅黑，我估计应该原因是在网 ...
OK，我去试试你这个扩展，谢了
ywzhaiqi 发表于
设置默认字体为雅黑就行了
麻烦问下你的图片这个是什么东西？软件还是扩展
Copyright & KaFan & All Rights Reserved.
Powered by Discuz! X3.1( 苏ICP备号 ) GMT+8,(理想生活实验室)
(理想生活实验室)
(jansoo锦瑟)
第三方登录：

我要回帖

更多关于 ie8 显示不出css样式 的文章

 

随机推荐