部分ページがCSSクラスを正しく描画しない

さまざまな色の円を作成するために.cssクラスを作成しました。 1つのファイルでcssクラスを使用すると、期待どおりに動作します。しかし、角度のある部分ページでそれを使用しようとすると、正しくレンダリングされません。部分ページがCSSクラスを正しく描画しない

正しい：正しくない：

は、ここで、ここで赤い丸

.red-circle { 
    margin: 40px auto 0; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
    border: 1px solid #c92c09; 
}.red-circle:before, .red-circle:after { 
    content: ''; 
    width: 15px; 
    height: 30px; 
}.red-circle:before { 
    float: left; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    background: #c92c09; 
}.red-circle:after { 
    float: right; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    background: #c92c09; 
}

とのCSSクラスは、それが

<link rel="stylesheet" href="../css/circles.css" type="text/css" /> 
<body>  
     <div class="red-circle"><div> 
    </body>

正しいHTMLページで使用されている方法ですされており、ここで間違って表示されるhtmlです

<div class="container" ng-controller="FieldCtrl"> 
    <link rel="stylesheet" href="../css/circles.css" type="text/css" /> 
    <div class="red-circle"> </div> 
</div>

出典

2016-05-17 Bob Cummings

を使用し、positionとtopを追加し、floatsを削除あなたの "正しい"バージョンのHTMLは、無効です。 – Serlite

だけではなく、それはあるけれどもそれは、エラーを再現するかは不明だrightとleft

CSS

.red-circle { 
    margin: 40px auto 0; 
    width: 30px; 
    height: 30px; 
    border-radius: 100%; 
    border: 1px solid #c92c09; 
    position: relative; 
} 

.red-circle:before, 
.red-circle:after { 
    top: 0; 
    position: absolute; 
    content: ''; 
    width: 15px; 
    height: 30px; 
} 

.red-circle:before { 
    left: 0; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
    background: #c92c09; 
} 

.red-circle:after { 
    right: 0; 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    background: #c92c09; 
} 

.container { 
    display: inline-block; 
}

DEMO HERE

出典

2016-05-17 16:52:22

ありがとう。私は4時間以上過ごして、すぐにそれを解決することを強くお勧めします。 –

部分ページがCSSクラスを正しく描画しない

答えて

関連する問題