html - 内联时 CSS 无法正常工作

Question

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

我想要的:http://codepen.io/anon/pen/qEBbQg

我得到的是:http://codepen.io/anon/pen/ogNbQO

block 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"，这样它们就不会链接到电子邮件中。