У меня есть этот код для индикатора выполнения, отображающего жизненный цикл, через который может пройти запрос в службу поддержки:
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li { /*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before { /*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after { /* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done { /* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before { /* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after { /* line following completed tasks */
background-color: #55b776;
}
<div class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</div>
Работает отлично, но когда я пытаюсь включить его в форматированный документ, цветная полоса, соединяющая различные «этапы», либо теряет свой цвет, либо перестает существовать,Я думаю, это из-за того, что разные цвета фона перекрывают друг друга, но неважно, так ли это на самом деле, я не уверен, как можно исправить или предотвратить его появление.Может кто-нибудь, пожалуйста, помогите мне понять, что я не могу понять?
Вот где возникает проблема:
.container {
width: 700px;
margin: 100px auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
/*name of incomplete tasks */
list-style-type: none;
width: 20%;
float: left;
font-size: 12px;
font-family: sans-serif;
position: relative;
text-align: center;
color: #7d7d7d;
}
.progressbar li:before {
/*circle of incomplete tasks */
width: 20px;
height: 20px;
content: "";
counter-increment: step;
line-height: 20px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 5px auto;
border-radius: 50%;
background-color: white;
}
.progressbar li:after {
/* line preceding incomplete tasks */
width: 100%;
height: 2px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 12px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.done {
/* check mark and name of completed tasks */
color: #55b776;
}
.progressbar li.done:before {
/* circles of completed tasks */
border-color: #55b776;
content: "\2713";
}
.progressbar li.done+li:after {
/* line following completed tasks */
background-color: #55b776;
}
<!DOCTYPE html>
<html>
<div style="width:650px; background-color:#EEEEEE;">
<header>
<h1>
COMPANY
</h1>
</header>
<table width="95%" align="center" cellpadding="10" style="width:95%; background-color: #666666;">
<tbody>
<tr>
<td style="padding-left:15px">Case Number: 0000000</td>
</tr>
</tbody>
</table>
<table cellpadding="10">
<tbody>
<tr>
<td style="padding-left:35px">Date Opened: 10/31/2017 at 2:13 PM</td>
</tr>
</tbody>
</table>
<table width="95%" align="center" cellpadding="10" style="width:95%;background-color:white;">
<tbody>
<tr>
<td style="padding-left:20px;">
You are receiving this email because your case has been updated. Your case details and any updates can be found below this message.
<br /> If you wish to post a comment to the case you can simply reply to this email and your case will be updated. If you would like to include a screenshot or relevant log files you can do so by including them in your reply.
</td>
</tr>
<tr>
<td align="center" style="text-align: center;">
<span class="container">
<ul class="progressbar">
<li class="done">Open</li>
<li class="done">In Progress</li>
<li>With Engineering</li>
<li>Resolution Provided</li>
<li>Closed</li>
</ul>
</span>
</td>
</tr>
<tr>
<td style="padding-left:20px;">
In order to proceed with your case we will need additional information or clarification on the reported issue. Please provide the requested information within the next 4 days. If no response is received during this time we will temporarily archive your
case. Once you are ready to continue with simply reply to one of the case emails.
</td>
</tr>
<tr>
<td></td>
</tr>
<td>
<table cellpadding="5" style="border-collapse:collapse;">
<tbody>
<tr>
<td width="150" style="width:150px;background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Subject</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET TITLE HERE</td>
</tr>
<tr>
<td width="150" style="width:150px; background-color:#EEEEEE;padding-left:20px;border-left:10px solid white;">
<span style="background-color:#EEEEEE;">Description</span>
</td>
<td width="350" style="width:350px;border:1px solid #EEEEEE;">TICKET DESCRIPTION HERE</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
</div>
</html>