css - 元素符号不会在 Firefox 中消失

标签 css firefox styles html-lists

<分区>

希望你能帮我解决一个问题。我无法摆脱 Firefox 中的元素符号,我不想在任何地方使用任何元素符号,因此我的列表样式类型:无!重要无处不在。据我所知,它只出现在 Firefox 中。

HTML....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
    <title>littleprints.nl</title>
    <meta name="description" content="----" />
    <meta name="keywords" content="----" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/slimbox2.js"></script>
    <link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="layout.css"/>
    <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
    <div id="container">
      <div id="inline1">
         <div id="mainpic">
            <img src="myimages/circle.jpg" width="100%" alt="Circle bracelet"/>
         </div>
         <div id="intro">
            <p>Hi and welcome to little prints NL. we make this and that all by hand with 100% silver. my name is Donna Burns and i work by commision, ive been studying for 4 years and am currently learning to become a goldsmith.</p>
         </div>
      </div>

      <div id="inline2">
         <p>Click for more...</p>
         <div id="images">
            <a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/chunky.gif" alt="chunky"/></a>
            <a href="myimages/photos/hearts.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/hearts.gif" alt="hearts"/></a>        
            <a href="myimages/photos/close.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" ><img src="myimages/work/close.gif" alt="close"/></a>       
            <a href="myimages/photos/pearl.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a>
            <a href="myimages/photos/flower.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a>
            <a href="myimages/photos/frontcircle.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a>       
            <a href="myimages/photos/dogtag.jpg" rel="lightbox-gal" title="Beautiful, isn't it?" >&nbsp;</a> 

        </div>
     </div>

</div><!--end container-->

<div id="footer">
    <div id="footalign">

       <div id="social">

         <ul>
            <li>
              <a href="http://www.facebook.com/littleprints" title="Little Prints">
                 <img src="myimages/facebook.png" width="50px" height="50px" alt="FB"/>
              </a>
           </li>
           <li>
             <a href="contact.html" title="contact">
                <img src="myimages/at.gif" alt="@"/>
             </a>
           </li>
        </ul>


      </div>

      <div id="contact">
         <p><br/>To enquire about a charm either phone:<br/> 0787463289<br/> or use one of the methods to the side.</p>
      </div>


    </div>
 </div>

 </body>
</html>

CSS...

* {margin: 0; padding: 0; border: 0;}

html, body {
    background-color: #000000;image;
    text-align: center;
    font: 16px/1.8 Verdana, Arial, Helvetica, sans-serif;
    list-style-type: none!important;
    text-decoration: none;
}

#container {
    position: relative;
    width: 900px;
    top: 0;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    background-image: URL(myimages/back2.gif);
    margin-bottom: 180px;
}

#footer {
    background-color: #555555;
    position: relative;
    clear: both;
    bottom: 0;
    width: 900px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    padding-bottom: 22px;
    margin-top: -180px;
}

#inline1{
    display: inline-block;
    margin-top: 250px;
    margin-bottom: 20px;
}

#inline2 {
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 50px;
}

#mainpic {
    float: left;
    width: 68%;
    margin-left: 20px;
}

#intro {
    float: right;
    width: 20%;
    margin-left: auto;
    margin-right: 50px;
    margin-top: 20px;
}

#images {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

#footalign {
    display: inline;
    width:900px;
    list-style-type: none;
}

#contact {
    text-align: center;
    background-color:#555555;
    float: middle;
    list-style-type: none;
}

#social{
    background-color:#555555;
    float: right;
    list-style: none;
    padding:0;
    padding-right: 5px;
    text-align:center;
    list-style-type: none!important;
}

#social  img{
    border: none;
    list-style-type: none!important;
    margin: 3px;
}

#social ul{
    border: none;
    list-style-type: none!important;
}

#social a{
    display:inline-block;
    -webkit-transition:all .5s ease-out;
    -moz-transition:all .5s ease-out;
    -ms-transition:all .5s ease-out;
    -o-transition:all .5s ease-out;
    transition:all .5s ease-out;
    list-style-type: none!important;
}

#social a:hover{
    display:inline-block;
    -webkit-transform:translate(-10px,0px);
    -moz-transform:translate(0px,-10px);
    -ms-transform:translate(-10px,0px);
    -o-transform:translate(-10px,0px);
    transform:translate(-10px,0px);
    list-style-type: none!important;
}

#form {
    margin-top: 250px;
    margin-bottom: 50px;
}

.nav1
    {font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #000000;}
    a:link {text-decoration:none; color:#000000; padding:3px;}
    a:visited {text-decoration:none; color:#000000;}
    a:active {text-decoration:none; color:#555555;}
    a:hover {text-decoration:none; color:#555555;}

.nav2
    {font-family: sans-serif;font-size: 22px;text-shadow: 2px 2px 5px #ffffff;}
    a:link {text-decoration:none; color:#ffffff; padding:3px;}
    a:visited {text-decoration:none; color:#ffffff;}
    a:active {text-decoration:none; color:#555555;}
    a:hover {text-decoration:none; color:#555555;}

.p1 {
    color: #ffffff;
}

div#images img {
    max-width: 500px;
    height: auto;
}

最佳答案

尝试:

#social ul {
border: none;
list-style: none!important;
}

只使用 list-style 可能会简化它。但无论如何,我在 Firefox 中,我没有看到任何要点。

您可能想尝试在 jsFiddle 中为我们设置一个测试用例。像这样发布代码有时是大海捞针!

http://jsfiddle.net/

祝你好运。

PS - 在下面的代码中放置 list-style 是没有意义的,因为您指定的是 img 标签!

#social img {
border: none;
list-style-type: none!important;
margin: 3px;
}

更新:

为了论证(因为我不能确切地看到你的应用程序是如何工作的),尝试为你的列表设置一个全局默认样式,如下所示:

ul, ol { list-style: none; }

此外,我知道在一些较旧的浏览器中,在实际的 li 本身上设置它也有帮助(虽然我可能是错的):

li { list-style: none; }

关于css - 元素符号不会在 Firefox 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13957115/

相关文章:

css - 内嵌 ruby​​ 样式宽度标签

javascript - 如何使图像 : enlarge when small, 在大时保持居中

firefox - 配置系统范围的代理设置

html - 在 Firefox 上选择时缺少右边框

javascript - 绕过打开链接js限制

javascript - 增加整个html文档的字体大小(所有元素)

WPF DatePicker IsEnabled 属性不会改变外观

php - Nginx + Yii 应用程序 = js,css - net::ERR_CONNECTION_REFUSED

css - 平滑 CSS3 动画

html - 使用 2 个按钮在 Bootstrap 中创建响应式导航栏