开发者社区> 问答> 正文

<a>的text-decoration设置无效

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行?怎么解决?

展开
收起
杨冬芳 2016-06-01 10:16:36 4581 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

    2019-07-17 19:22:48
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载