Question

我想让我的CSS内联，但CSS的某些部分似乎停止工作。我尝试了所有可以找到的CSS内联服务，结果总是一样。

我想要的是什么：http://codepen.io/anon/pen/qEBbQg

我得到了什么：http://codepen.io/anon/pen/ogNbQO

块CSS：

li {
    display: inline;
    padding: 20px;
    font-weight: bold;
}

#navigation{
    width: 100%;
    background: #0f83a0;
    display: inline-block;
    position: fixed;
    text-align: right;
    height: auto;
    font-size: 20px;
    z-index: 999;
}

html, body{
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}
li a {
    text-decoration: none;
    color: #FFF;
    padding: 8px 8px 8px 8px;
}
#navigation ul li a{
    cursor:pointer;
    background-color: #0f83a0;
    color:white;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

#navigation ul li a:hover{
    background-color: #fff;
    color: #0f83a0;
}
</style>

<div id="navigation">
            <img id="logo" src="logo.png" style="display:inline-block; position:absolute; left:5; top: 0; height: 100%;"/>
            <ul>
                <li>
                    <a href="#1">What is this?</a>
                </li>
                <li>
                    <a href="#2">[Title 2]</a>
                </li>
                <li>
                    <a href="#3">Works everywhere</a>
                </li>
                <li>
                    <a href="#4">Contact</a>
                </li>
            </ul>
        </div>

内联CSS：

<div id="navigation" style="width:100%;background-color:#0f83a0;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;display:inline-block;position:fixed;text-align:right;height:auto;font-size:20px;z-index:999;" >
            <img id="logo" src="logo.png" style="display:inline-block;position:absolute;left:5;top:0;height:100%;" />
            <ul>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#1" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >What is this?</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#2" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >[Title 2]</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#3" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Works everywhere</a>
                </li>
                <li style="display:inline;padding-top:20px;padding-bottom:20px;padding-right:20px;padding-left:20px;font-weight:bold;" >
                    <a href="#4" style="text-decoration:none;padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;cursor:pointer;background-color:#0f83a0;color:white;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;" >Contact</a>
                </li>
            </ul>
        </div>

悬停动画无效

Answer 1

首先，内联CSS是一个坏主意。更难以维护，并且在元素和页面之间非常容易出现问题，否则这些问题会出现在一种风格中。

此外，您无法执行内联:hover之类的操作。这必须通过样式表来完成。此外，内联CSS具有最高优先级，因此即使使用:hover覆盖内联CSS样式也不起作用。唯一的方法是使用CSS样式表和!important属性，如下例所示。

http://codepen.io/anon/pen/MYWKZQ

编辑：

使用iframe电子邮件，并使所有链接都target="_blank"，以便他们不会在电子邮件中链接。

内联时CSS无法正常工作

1 个答案: