问题描述:

I want to make my CSS inline but certain parts of the CSS seem to stop working. I tried all CSS inliner services I could find and the result is always the same.

What I want: http://codepen.io/anon/pen/qEBbQg

What I get: 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>

Inline 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>

On-hover animations are not working

网友答案:

To begin, inline CSS is a bad idea. Much harder to maintain, and very prone to issues between elements and pages that otherwise would be in one style.

Also, you can't do things like :hover inline. That has to be done via a stylesheet. Furthermore, inline CSS has the highest priority, so even using :hover to overwrite inline CSS styles doesn't work. The only way you can do this is by using a CSS stylesheet, and the !important attribute, as can be seen in the example below.

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

EDIT:

Use an iframe for email, and make all your links have target="_blank" so they won't link in the email.

相关阅读:
Top