2 andrewspears AndrewSpears 于 2016.02.09 10:08 提问

CSS链接样式在chrome中的显示问题

首先,我的html文件和css文件的代码如下:
图1-html代码和对应的Css代码
在IE浏览器中表现正常,如下图
图2-IE9刚刚加载页面没有任何操作
图3-IE9下点击链接后效果
图4-IE9下鼠标悬停链接效果

而在chrome浏览器中,我第一加载网页的时候,效果和IE9刚刚加载页面的效果一样。但是,我点击其中任何一个链接,其余三个链接的效果都发生了改变,如图
图5-chrome下点击任何链接后效果
但是,鼠标悬停效果存在,如图
图6-chrome下鼠标悬停效果
然后是最终要的问题,我使用chrome再次加载这个页面,就直接出现如图5的效果,而跳过了图1的效果图。我尝试清除一下浏览记录,再使用chrome浏览器就会出现图1效果。我感觉是浏览器兼容的问题。在思考后,有以下3个问题:
1.怎样使chrome每次一刷新而不用手动清除浏览记录就可以看到图1效果;
2.怎样纠正在chrome浏览器下,点击一个链接全部链接效果发生改变的问题;
3.浏览器兼容这方面有什么好的材料或教材视频,可以给我这样的新手学习。
最后,谢谢回答此问题的各位!
另祝大家新年快乐!

1个回答

devmiao
devmiao   Ds   Rxr 2016.02.09 21:51
AndrewSpears
AndrewSpears 感谢回答。但是我的代码中没有中文,UTF-8也已经明确写在代码里
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
chrome插件开发之:处理由于注入css导致页面的ui出现错位的问题
由于注入到淘宝和天猫什么的不是什么好事情,所以,这里淘宝用TB代替,天猫用TM代替。 不知道为什么,引入了插件之后,导致TB的html的ui出现错位的问题!而TM则不会。 用的boostrap的版本是:v3.3.5 解决思路: 首先得定位问题! 经过不断的测试,发现是由于导入了css: “include/bootstrap/css/bootstrap.min.css” 导致! 引入了c
CSS <hr>标签在float布局中Firefox和Chrome的差异
CSS <hr>标签在float布局中Firefox和Chrome的差异
浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试
在浏览器兼容之JavaScript篇——已在IE、FF、Chrome测试和浏览器兼容性问题解决方法,已在IE、FF、Chrome测试中已经对浏览器中存在的CSS的兼容性和JS的兼容性进行了简单说明,现在继续对浏览器中存在的CSS的兼容性问题进行简单说明。 1)列表不能换行的问题 问题:         li设置为浮动,后面的li紧随其后,不能换行 解决:        在下一个li上
浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试
最近在跟一个同学共同整理一个关于浏览器兼容性问题的文档,我们主要是找出在主流浏览器中出现哪些问题,如何解决这个问题,并给出实例。在这之前,需要明白一下几个问题。 什么是浏览器兼容问题?         所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应
使用CSS美化Chrome下的滚动条样式
浏览器原生的滚动条有时过多会影响界面美观,IE下的滚动条更是如此,有时我们需要美化一下滚动条,可以使用浏览器原生的样式,或者使用JS插件,这里介绍如何修改Chrome下的滚动条样式。主要借助伪元素实现://index.html <body> <div class="container"> <p>Pellentesque habitant morbi tristique sen
Html+CSS 疑难杂症一 Chrome记住密码后黄色背景 的解决方法
chrome 表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: input : -webkit-autofill {background-color : #FAFFBD ;background-image : none ;colo
在table中tr的display:block在firefox,chrome下显示布局错乱问题
按照常理,对于某一单元行需要显示时,使用:display:block属性,不需要显示时使用display:none属性,而且这样做在IE浏 览器中显示正常,没有任何问题。 但是当用Firefox浏览时却出现了布局错乱的问题,然后通FireBug去看了下源码,调试下了,发现是display:block属性搞的 鬼。 1、当表格为多列的情况下,属性为"display:block"行的内容宽
css的位置引起的ie下的“无样式内容的闪烁FOUC”,和非ie的“白屏”
css的位置引起的ie下的“无样式内容的闪烁FOUC”,和非ie的“白屏”我们都知道要将css放在head中,将js放在</body>前,但是为什么要这样?本文深入讲解为何要把css放在head中。我先放了个google的css(不翻墙无法访问,模拟网络阻塞),然后第二个css是本地css,用于把一行文字变成红色。<body><div id="my-id"> dsafdf </div> <!
关于“Chrome DevTools - 编辑CSS样式”
使用Styles(样式)窗格修改与元素关联的CSS样式。 TL;DR Styles(样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。 检查应用到元素的样式 选择一个元素[Select an element] 来检查它的样式。Style
[分享] 通过修改CSS自定义chrome滚动条样式
首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思 效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall不能回帖 翻wall的情况下 上论坛这个慢啊 所以 大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958 大家都知道哈 c