<a>的text-decoration设置无效-问答-阿里云开发者社区-阿里云

开发者社区> 杨冬芳> 正文

<a>的text-decoration设置无效

2016-06-01 10:16:36 3740 1

screenshot

<!DOCTYPE html> 
2 <html> 
3 <meta charset="utf-8" /> 
4 <head> 
5   <style type="text/css"> 
6     a {text-decoration:none;} 
7     body{font-family:Helvetica;} 
8     #div_body{width:420.4px;height:275.2px;border:thin solid #b9b9b9;border-radius:8px;} 
9     #div_body_head{width:420.4px;height:39.6px;color:#fff;font-weight:bold;font-size:17px;border-radius:8px 8px 0 0; 
10     border:thin solid #C17259; 
11     background:-webkit-linear-gradient(top,#F7928C,#D87353); 
12      
13      
14     } 
15     .body_head_span{display:inline-block;position:relative;top:9px;color:#fff;text-align:center;} 
16     #ico_close:hover {background:#fff;color:#D87353;} 
17     .inputBlank{display:block;font-size:14px;position:relative;left:28px;width:330px;border:thin solid #DCDCDC;padding:12px;color:#6A6969;} 
18     #div_foot{position:relative;top:85px;} 
19     #div_foot_login{position:relative;left:144px;border:thin solid #B6CAD1;width:100px;font-size:16px;color:#8199A1;font-weight:bold;padding:6px; 
20       background:-webkit-linear-gradient(top,#EFF6F9,#C6DFE9); 
21       border-radius:20px; 
22       text-align:center; 
23       display:inline-block; 
24     } 
25     #div_foot_login:active{background:#C6DFE9;color:#EFF6F9;} 
26     #div_chbox{ 
27       display:inline-block; 
28       left:25px; 
29       position:relative; 
30       line-height:28px; 
31     } 
32     #remember{zoom:150%;position:relative;top:3px;} 
33   </style> 
34   <script type="text/javascript"> 
35     document.addEventListener("DOMContentLoaded",function(){ 
36       var uName = document.getElementById("uName"); 
37       var uPass = document.getElementById("uPass"); 
38        
39       function elementOperate(obj){ 
40         var defaultVal = obj.id==="uName"?"Username":"Password"; 
41         var value; 
42         return { 
43           Txt_onfocus:function(){ 
44             value = obj.value; 
45             if(value === defaultVal){ 
46               obj.value = ''; 
47               obj.select(); 
48             }else { 
49               obj.select(); 
50             } 
51           }, 
52           Txt_onblur:function(){ 
53             value = obj.value; 
54             if(value ==''){ 
55               obj.value = defaultVal; 
56             }else { 
57             } 
58           } 
59         } 
60       } 
61        
62       uName.onclick = elementOperate(uName).Txt_onfocus; 
63       uName.onblur = elementOperate(uName).Txt_onblur; 
64       uPass.onclick = elementOperate(uPass).Txt_onfocus; 
65       uPass.onblur = elementOperate(uPass).Txt_onblur; 
66     },false); 
67   </script> 
68 </head> 
69 <body> 
70   <div id="div_body"> 
71     <div id="div_body_head"> 
72       <span style="left:20px;" class="body_head_span">Sign In</span> 
73       <a href="#"><span class="body_head_span" id="ico_close" style="left:320px;width:20px;">x</span></a> 
74     </div> 
75     <input type="text" id="uName" class="inputBlank" value="Username" style="top:26px;"/> 
76     <input type="text" id="uPass" class="inputBlank" value="Password" style="top:52px;"/> 
77     <div id="div_foot"> 
78       <div id="div_chbox"><input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label></div> 
79       <a href="#"><div id="div_foot_login">Log In</div></a> 
80     </div> 
81   </div> 
82 </body> 
83 </html> 

我的问题是:

请注意观察源码的6,26,31行。
为了不被a标签的默认样式(下划线以及字体颜色深蓝)影响,我写了第6行的css。
但是只有第31行的a标签受到了text-decoration的影响,
第26行没有被影响到。
在chrome中查看element的时候可以看到第26行的样式是

Inherited from a:
 user agent stylesheet a:-webkit-any-link {
 color: -webkit-link;
 cursor: auto;
 }

为什么 text-decoration:none 影响不到第26行?怎么解决?

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:22:48

    screenshot
    screenshot
    你说第26行没有被影响到,是不是显卡出了问题

    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56738浏览量 回答数 19

1

回答

ORACLE错误原因查询表ORA-%常见ORA-12514

oracle数据库技术支持www.yunDBA.com 2014-11-12 13:52:58 50018浏览量 回答数 1

43

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49607浏览量 回答数 43

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145643浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47049浏览量 回答数 15

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302629浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80134浏览量 回答数 13

31

回答

OSS for PHPWIND 8.7 [20121127更新]

enj0y 2012-09-10 15:48:13 55171浏览量 回答数 31

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47071浏览量 回答数 46

2

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48535浏览量 回答数 2
+关注
杨冬芳
IT从业
1
文章
9167
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载