Question

我正在使用Drupal 7中的一个页面，其中有许多带有文本的框和其中的照片。我有整个框div连接到其内容页面，但我似乎无法摆脱下划线。

我尝试将text-decoration: none;应用于框内外的每个类，框内的文字仍带有下划线。

即使我在Google中使用开发者工具/“检查元素”工具，它也会显示框中的计算样式和文本内的text-decoration: none;

我一直在努力解决这个问题大约一天，而且我无法通过谷歌找到任何解决方案。

有什么想法吗？

提前致谢。

编辑：我正在发布我的代码。我正在尝试找到一个很好的发布解决方案，因为它是Drupal中通过Views呈现的页面。此外，我在一小时内接受了面试，我正准备参加。我可能应该等到面试之后发布这个问题..哦，好吧。

编辑x2：我的HTML如下：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" class="js"><head profile="http://www.w3.org/1999/xhtml/vocab">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
  <title>Portfolio Page | mywebsite.com</title>
  <style type="text/css" media="all">@import url("http://url.com/modules/system/system.base.css?m178g6");
@import url("http://url.com/modules/system/system.menus.css?m178g6");
@import url("http://url.com/modules/system/system.messages.css?m178g6");
@import url("http://url.com/modules/system/system.theme.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/misc/ui/jquery.ui.core.css?m178g6");
@import url("http://url.com/misc/ui/jquery.ui.theme.css?m178g6");
@import url("http://url.com/modules/overlay/overlay-parent.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/modules/comment/comment.css?m178g6");
@import url("http://url.com/modules/field/theme/field.css?m178g6");
@import url("http://url.com/modules/node/node.css?m178g6");
@import url("http://url.com/modules/search/search.css?m178g6");
@import url("http://url.com/modules/user/user.css?m178g6");
@import url("http://url.com/sites/all/modules/views/css/views.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/modules/ctools/css/ctools.css?m178g6");
@import url("http://url.com/sites/all/modules/lightbox2/css/lightbox.css?m178g6");
@import url("http://url.com/sites/all/modules/views_slideshow/views_slideshow.css?m178g6");
@import url("http://url.com/modules/shortcut/shortcut.css?m178g6");
@import url("http://url.com/modules/toolbar/toolbar.css?m178g6");</style>
<style type="text/css" media="all">@import url("http://url.com/sites/all/themes/personal/css/style.css?m178g6");</style>
<style type="text/css" media="print">@import url("http://url.com/sites/all/themes/personal/css/print.css?m178g6");</style>
<style type="text/css" media="mobile">@import url("http://url.com/sites/all/themes/personal/css/mobile.css?m178g6");</style>
  <script type="text/javascript" src="http://url.com/misc/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="http://url.com/misc/drupal.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/ui/jquery.ui.core.min.js?v=1.8.7"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views/js/views-contextual.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.ba-bbq.js?v=1.2.1"></script>
<script type="text/javascript" src="http://url.com/modules/overlay/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/misc/jquery.cookie.js?v=1.0"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/lightbox2/js/lightbox.js?1332273397"></script>
<script type="text/javascript" src="http://url.com/sites/all/modules/views_slideshow/js/views_slideshow.js?m178g6"></script>
<script type="text/javascript" src="http://url.com/modules/toolbar/toolbar.js?m178g6"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"personal","theme_token":"0CkOwyp1neNP-2IbE8LYCgYGBJ9sz39ORy5DodizAGg","js":{"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"misc\/ui\/jquery.ui.core.min.js":1,"sites\/all\/modules\/views\/js\/views-contextual.js":1,"misc\/jquery.ba-bbq.js":1,"modules\/overlay\/overlay-parent.js":1,"misc\/jquery.cookie.js":1,"sites\/all\/modules\/lightbox2\/js\/lightbox.js":1,"sites\/all\/modules\/views_slideshow\/js\/views_slideshow.js":1,"modules\/toolbar\/toolbar.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"misc\/ui\/jquery.ui.core.css":1,"misc\/ui\/jquery.ui.theme.css":1,"modules\/overlay\/overlay-parent.css":1,"modules\/comment\/comment.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/views\/css\/views.css":1,"sites\/all\/modules\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/lightbox2\/css\/lightbox.css":1,"sites\/all\/modules\/views_slideshow\/views_slideshow.css":1,"modules\/shortcut\/shortcut.css":1,"modules\/toolbar\/toolbar.css":1,"sites\/all\/themes\/personal\/css\/style.css":1,"sites\/all\/themes\/personal\/css\/print.css":1,"sites\/all\/themes\/personal\/css\/mobile.css":1}},"lightbox2":{"rtl":0,"file_path":"\/(\\w\\w\/)public:\/","default_image":"\/sites\/all\/modules\/lightbox2\/images\/brokenimage.jpg","border_size":10,"font_color":"000","box_color":"fff","top_position":"","overlay_opacity":"0.8","overlay_color":"000","disable_close_click":true,"resize_sequence":0,"resize_speed":400,"fade_in_speed":400,"slide_down_speed":600,"use_alt_layout":false,"disable_resize":false,"disable_zoom":false,"force_show_nav":false,"show_caption":true,"loop_items":false,"node_link_text":"View Image Details","node_link_target":false,"image_count":"Image !current of !total","video_count":"Video !current of !total","page_count":"Page !current of !total","lite_press_x_close":"press \u003Ca href=\u0022#\u0022 onclick=\u0022hideLightbox(); return FALSE;\u0022\u003E\u003Ckbd\u003Ex\u003C\/kbd\u003E\u003C\/a\u003E to close","download_link_text":"Download Original","enable_login":false,"enable_contact":false,"keys_close":"c x 27","keys_previous":"p 37","keys_next":"n 39","keys_zoom":"z","keys_play_pause":"32","display_image_size":"","image_node_sizes":"()","trigger_lightbox_classes":"","trigger_lightbox_group_classes":"","trigger_slideshow_classes":"","trigger_lightframe_classes":"","trigger_lightframe_group_classes":"","custom_class_handler":0,"custom_trigger_classes":"","disable_for_gallery_lists":true,"disable_for_acidfree_gallery_lists":true,"enable_acidfree_videos":true,"slideshow_interval":5000,"slideshow_automatic_start":true,"slideshow_automatic_exit":true,"show_play_pause":true,"pause_on_next_click":false,"pause_on_previous_click":true,"loop_slides":false,"iframe_width":600,"iframe_height":400,"iframe_border":1,"enable_video":false},"overlay":{"paths":{"admin":"node\/*\/edit\nnode\/*\/delete\nnode\/*\/revisions\nnode\/*\/revisions\/*\/revert\nnode\/*\/revisions\/*\/delete\nnode\/add\nnode\/add\/*\noverlay\/dismiss-message\nuser\/*\/shortcuts\nadmin\nadmin\/*\nbatch\ntaxonomy\/term\/*\/edit\nuser\/*\/cancel\nuser\/*\/edit\nuser\/*\/edit\/*","non_admin":"admin\/structure\/block\/demo\/*\nadmin\/reports\/status\/php"},"ajaxCallback":"overlay-ajax"},"tableHeaderOffset":"Drupal.toolbar.height"});
//--><!]]>
</script>
</head>
<body class="html not-front logged-in no-sidebars page-portfolio toolbar toolbar-drawer lightbox-processed" style="padding-top: 65px; ">
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a>
  </div>
  <div id="overlay-disable-message" class="clearfix"><h3 class="element-invisible">Options for the administrative overlay</h3><a href="/user/1/edit?destination=portfolio#edit-overlay-control" id="overlay-profile-link" class="overlay-exclude element-invisible">If you have problems accessing administrative pages on this site, disable the overlay on your profile page.</a> <a href="/overlay/dismiss-message?destination=portfolio&amp;token=snk0Img0V_hSox1Q_-De1dEEDTtRR_v0O00J3BOSulg" id="overlay-dismiss-message" class="overlay-exclude element-invisible">Dismiss this message.</a></div><div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed">
  <div class="toolbar-menu clearfix">
    <ul id="toolbar-home"><li class="home first last"><a href="/" title="Home"><span class="home-link">Home</span></a></li>
</ul>    <ul id="toolbar-user"><li class="account first"><a href="/user" title="User account">Hello <strong>user</strong></a></li>
<li class="logout last"><a href="/user/logout">Log out</a></li>
</ul>    <h2 class="element-invisible">Administrative toolbar</h2><ul id="toolbar-menu"><li class="menu-11 path-admin-dashboard first"><a href="/admin/dashboard" id="toolbar-link-admin-dashboard" title="View and customize your dashboard."><span class="icon"></span>Dashboard <span class="element-invisible">(View and customize your dashboard.)</span></a></li>
<li class="menu-9 path-admin-content"><a href="/admin/content" id="toolbar-link-admin-content" title="Administer content and comments."><span class="icon"></span>Content <span class="element-invisible">(Administer content and comments.)</span></a></li>
<li class="menu-21 path-admin-structure"><a href="/admin/structure" id="toolbar-link-admin-structure" title="Administer blocks, content types, menus, etc."><span class="icon"></span>Structure <span class="element-invisible">(Administer blocks, content types, menus, etc.)</span></a></li>
<li class="menu-7 path-admin-appearance"><a href="/admin/appearance" id="toolbar-link-admin-appearance" title="Select and configure your themes."><span class="icon"></span>Appearance <span class="element-invisible">(Select and configure your themes.)</span></a></li>
<li class="menu-18 path-admin-people"><a href="/admin/people" id="toolbar-link-admin-people" title="Manage user accounts, roles, and permissions."><span class="icon"></span>People <span class="element-invisible">(Manage user accounts, roles, and permissions.)</span></a></li>
<li class="menu-16 path-admin-modules"><a href="/admin/modules" id="toolbar-link-admin-modules" title="Extend site functionality."><span class="icon"></span>Modules <span class="element-invisible">(Extend site functionality.)</span></a></li>
<li class="menu-8 path-admin-config"><a href="/admin/config" id="toolbar-link-admin-config" title="Administer settings."><span class="icon"></span>Configuration <span class="element-invisible">(Administer settings.)</span></a></li>
<li class="menu-19 path-admin-reports"><a href="/admin/reports" id="toolbar-link-admin-reports" title="View reports, updates, and errors."><span class="icon"></span>Reports <span class="element-invisible">(View reports, updates, and errors.)</span></a></li>
<li class="menu-12 path-admin-help last"><a href="/admin/help" id="toolbar-link-admin-help" title="Reference for usage, configuration, and modules."><span class="icon"></span>Help <span class="element-invisible">(Reference for usage, configuration, and modules.)</span></a></li>
</ul>          <a href="/toolbar/toggle?destination=portfolio" title="Hide shortcuts" class="toggle toggle-active toolbar-toggle-processed">Hide shortcuts</a>      </div>

  <div class="toolbar-drawer clearfix">
    <div class="toolbar-shortcuts"><ul class="menu"><li class="first leaf"><a href="/node/add">Add content</a></li>
<li class="leaf"><a href="/admin/content">Find content</a></li>
<li class="leaf"><a href="/admin/config/development/performance">Performance</a></li>
<li class="last leaf"><a href="/admin/config/development/maintenance">Maintenance mode</a></li>
</ul></div><a href="/admin/config/user-interface/shortcut/shortcut-set-1" id="edit-shortcuts">Edit shortcuts</a>  </div>
</div>
  <!-- If front page, present front page content -->
<div id="a">
<!-- Begin other page specific content -->
<div id="smallhead">
</div>
</div><!-- End div a-->
<!-- Begin menu -->
<div id="b">
<div id="menu">
<a href="/home"><div class="item">Home</div></a>
<a href="/about"><div class="item">About Me</div></a>
<a href="/portfolio"><div class="item">Portfolio</div></a>
<a href="/photos"><div class="item">Photos</div></a>
<a href="/projects"><div class="item">Projects</div></a>
<a href="/blog"><div class="item">Blog</div></a>
</div>
</div>
<div id="c">
<div id="middle">
<!-- Begin other page specific content -->
<div id="contentwrapper">
  <div class="region region-content">
    <div id="block-system-main" class="block block-system">


  <div class="content">
    <div class="view view-portfolio-page view-id-portfolio_page view-display-id-page view-dom-id-a0c892fe2818834f0a7750c98e7e6688">



      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">

  <div>        <div><a href="/node/10">
<div class="smallbox">
<div class="nounderline">
<strong>Postcards</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Postcards<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-2 views-row-even">

  <div>        <div><a href="/node/9">
<div class="smallbox">
<div class="nounderline">
<strong>Design</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Desiugn<br>
Adobe Illustrator
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-3 views-row-odd">

  <div>        <div><a href="/node/8">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt="screenshot"><br>
Awareness Campaign<br>
HTML, CSS
</div>
</div></a></div>  </div>  </div>
  <div class="views-row views-row-4 views-row-even views-row-last">

  <div>        <div><a href="/node/7">
<div class="smallbox">
<div class="nounderline">
<strong>Website</strong><br>
<img typeof="foaf:Image" src="" width="233" height="157" alt=""><br>
Details Website<br>
HTML 5, CSS 3
</div>
</div></a></div>  </div>  </div>
    </div>






</div>  </div>
</div>
  </div>
</div>
<!-- End other page specific content -->
</div><!--end middle-->
</div>
<div id="d">
<div id="footer">
;<a href="">Contact Form</a>
<br>
Copyright ©2012 My Name
</div>
</div>



<div id="lightbox2-overlay" style="display: none; "></div>      <div id="lightbox" style="display: none;" class="lightbox2-orig-layout">        <div id="outerImageContainer" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "><div id="modalContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="frameContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "></div><div id="imageContainer" style="display: none; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><img id="lightboxImage" alt=""><div id="hoverNav"><a id="prevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="nextLink" title="Next" href="#" style="padding-top: 10px; "></a></div></div><div id="loading"><a href="#" id="loadingLink"></a></div></div>        <div id="imageDataContainer" class="clearfix" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); ">          <div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav"><div id="frameHoverNav"><a id="framePrevLink" title="Previous" href="#" style="padding-top: 10px; "></a><a id="frameNextLink" title="Next" href="#" style="padding-top: 10px; "></a></div><a id="bottomNavClose" title="Close" href="#" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); "></a><a id="bottomNavZoom" href="#"></a><a id="bottomNavZoomOut" href="#"></a><a id="lightshowPause" title="Pause Slideshow" href="#" style="display: none;"></a><a id="lightshowPlay" title="Play Slideshow" href="#" style="display: none;"></a></div></div>        </div>      </div></body></html>

我的CSS如下：

@charset "utf-8";
/* CSS Document */
body{
    background: black;
    font-size: 14px;
    margin: 0;
    }
a:visited{
    color: blue;
}
h2{
    font-size: 135%;
    margin: .2em 0;
}
#a{
    width: 100%;
    background: rgb(140,79,84);
}
#bighead{
    height: 31em;
    width: 69em;
    margin: 0 auto;
    padding-top: 2em;
    background: url(../img/headerpic.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#header a{
    font-size: 35px;
    text-decoration: none;
    color: black;
}
#slogan{
    font-size: 18px;
    padding: .5em;
}
#smallhead{
    height: 14em;
    width: 69em;
    margin: 0 auto;
    background: url(../img/smallheader.jpg);
    text-align: center;
    border: 0 solid black;
    border-width: 0 4px;
}
#b{
    width: 100%;
    background: rgb(50,51,46);
}
#menu{
    width: 69em;
    height: 2.5em;
    border: 0 solid black;
    border-width: 0 4px;
    background: black;
    text-align: center;
    margin: 0 auto;
}
.item{
    font-size: 17.5px;
    height: 1.1em;
    width: 9.2em;
    float: left;
    padding: .3em 0;
    border-top: .2em solid rgb(31,38,28);
    border-bottom: .2em solid rgb(31,38,28);
}
#menu a:link, a:visited{
    text-decoration: none;
    color: #CCC;
}
#menu a:hover{
    color: white;
    background: white;
    text-decoration: underline;
}
#c{
    width: 100%;
    background: rgb(139,124,108);
}
#middle{
    min-height: 22.5em;
    width: 67.6em;
    margin: 0 auto;
    border: 0 solid black;
    border-width: 0 4px;
    background: rgb(98,103,109);
    padding: .75em;
    text-decoration: none;
}
.title{
    font-size: 2em;
    height: .5em;
    width: 24em;
    padding-left: 1em;
    padding-bottom: .25em;
    color: white;
}
.box{
    float: left;
    height: 17em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
}
#contentwrapper{
}
#d{
    width: 100%;
    background: black;
}
#footer{
    height: 2.5em;
    width: 69em;
    margin: 0 auto;
    background: black;
    text-align: center;
    color: white;
}
.smallbox{
    float: left;
    height: 15em;
    width: 17em;
    padding: 1em;
    padding-top: .5em;
    margin: 1.5em;
    background: rgb(49,49,51);
    color: white;
    text-align: center;
    text-decoration: none;
}
.smallbox img{
    padding: .2em 0;
}
.nounderline{
    text-decoration: none;
}

Answer 1

由于这是第一个google结果并且没有解决我的问题：检查锚状态，因为它可能需要在其他一个中设置。（https://www.w3schools.com/css/css_pseudo_classes.asp）

a,
a:link,
a:visited,
a:hover,
a:active{
    text-decoration: none;
}

Answer 2

要仅应用于此视图，请添加：

.view-portfolio-page .views-row a { text-decoration: none; }

要应用于所有视图，请添加：

 .views-row a { text-decoration: none; }

http://jsfiddle.net/D8kRE/

您正在将text-decoration：none应用于无效的div。您只能将其应用于锚标记，在您的情况下，锚标记位于.views-row a。您可以使用我上面提到的代码，将其更具体，并将其应用于投资组合页面视图。

Answer 3

尝试添加！important

text-decoration: none !important;

Answer 4

如果要引用文本的下划线，请记住在ELEMENT上将text-decoration属性设置为none。 E.g。

<html>
<head></head>
<body>
    <div>
        <a href="www.google.com" style="text-decoration: none"> Google</a>
    </div>
</body>

编辑：注意，使用样式与元素内联是不好的，我用它来演示解决方案。

Answer 5

而不是font-decoration: none;试试css text-decoration: none;

Answer 6

由于这实际上还没有得到确定的答案，而且谷歌搜索相当高。我以为我会接受我的回答。

我遇到了类似的问题，我无法确定为什么我无法摆脱下划线并发现这是因为我没有指定悬停状态。

所以试试

#header a:hover {
    text-decoration: none;
}

这应该有效。我知道这是很久以前发布的，但我已经看到你没有接受答案而且没有发布你是否排序。所以希望我的意见能帮助一路上的人，希望你能看到这一点，最后接受答案或自己做。

Answer 7

I know this is old, but this came upon my search as well. So I thought I'd share.

I had a similar problem. I created a regular nav and setting the text-decoration to none worked fine.

Then I had to amend my css to create a hamburger menu effect for smaller viewports. And although I used the exact same css, the underline appeared and nothing I did would make it go away. I know it has something to do with the toggle:checked & ~.mainNav feature under which my nav needed to be placed, but I couldn't figure out why and how to get around it.

In any case, the one thing that DID work was going into my reset, and adding a default: a {text-decoration: none}

Don't know why it worked, but it did. Hope this helps someone.

Answer 8

text-decoration在锚上工作，它的正确名称是：anchor-decoration-for-text。

当应用“text-decoration：none”时，链接文本仍带有下划线

8 个答案: