內聯時CSS無法正常工作

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 inline之類的操作。 這必須通過樣式表來完成。 此外，內聯CSS具有最高優先級，因此即使使用:hover覆蓋內聯CSS樣式也不起作用。 您可以執行此操作的唯一方法是使用CSS樣式表和!important屬性，如下面的示例所示。

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

編輯：

對電子郵件使用iframe ，並使所有鏈接都具有target="_blank"這樣它們就不會在電子郵件中鏈接。