部分頁面不能正確渲染css類

我已經創建了.css類來創建不同顏色的圓圈。如果我在一個文件中使用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; 
}

，這裏是它是如何在正確的html頁面中使用CSS類

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

和這裏是錯誤地顯示的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

目前還不清楚如何重現錯誤，雖然它是值得注意的是你的「正確」版本的HTML是真正的無效。 – Serlite

只需添加position和top和刪除floats，改用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類

回答

相關問題