Windows 8 Store Apps (HTML5/JavaScript) – CSS ist nicht gleich CSS

imageBei der Arbeit an einer Windows 8 Store App die ich mit HTML5 und JavaScript realisiere, bin ich auf folgendes Problem gestoßen (welches ich hier bereits auf Facebook gepostet habe):

Doch zuerst einmal ein kurzer Ausschnitt des Markup bei welchem das Problem auftritt:

<body>
	<div id="itemTemplate">
		<figure>
			<img id="profile-image" src="images/smalllogo.png" />
		</figure>
		<div>
			<span data-win-bind="innerText: text">Testen</span>
		</div>
	</div>
</body>

Im zugehörigen Stylesheet sind unter anderem folgende Styles definiert:

figure {
    margin: 0px;   
}

#itemTemplate figure img {
    margin: 30px;
}

So wie die Styles definiert sind, sollte das Image Element mit der ID “profile-image” eine Margin von 30px auf allen Seiten vorweisen.

Das funktioniert auch wenn man es in einem Browser aufruft (Sogar der IE funktioniert hierbei korrekt Smiley ).

imageWenn man diese Formatierung allerdings in einem “HTML5/JavaScript Windows a Store App” (was für ein BegriffTrauriges Smiley ) verwendet, greift der Style “#itemplate figure img” nicht in dem Image Element, welches in dem Figure Element eingebettet ist, sondern die Margin Einstellung des übergeordneten Elementes Figur hebt die Formatierung des darin eingebetteten Image Elementes auf.

Ein erstes kleines Fazit dabei ist, dass man sich nicht darauf verlassen kann, dass der zuletzt definierte Style tatsächlich Verwendung findet.
Wenigstens dann nicht wenn man übergeordnete globale Element Formatierungen verwendet.