早上好，
我目前正在一个共享站点上工作，并且需要创建某种组织结构图。图表将放在内容编辑器Webpart中，对我来说直截了当。在线找到了一个样本，并对其进行了修改以满足我的需求。 http://jsfiddle.net/hp5ksgfh/6/ 我遇到的问题是IE8（该网站的默认浏览器）。
下面的代码在IE9 +中完美地绘制了图表，而在IE8上失败了：
<style type="text/css">
.tree
{
width: auto;
margin-left: auto;
margin-right: auto;
}
.tree ul
{
padding-top: 20px;
padding-left: 0;
position: relative;
}
.tree li
{
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after
{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #e1793f;
width: 50%;
height: 20px;
}
.tree li:after
{
right: auto;
left: 50%;
border-left: 1px solid #e1793f;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before
{
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child
{
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after
{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before
{
border-right: 1px solid #e1793f;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after
{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before
{
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #e1793f;
width: 0;
height: 20px;
margin-left: -1px;
display: inline-block;
}
/*This will draw the links in an organigram format*/
.tree li a
{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: calibri, verdana, tahoma;
font-size: 11px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover + ul li a
{
background: #c8e4f8;
color: #000;
border: 1px solid #0771bd;
}
/*Connector styles on hover*/
.tree li a:hover + ul li::after, .tree li a:hover + ul li::before, .tree li a:hover + ul::before, .tree li a:hover + ul ul::before
{
border-color: #94a0b4;
}
li a.just-line
{
display: none;
}
a.just-line + ul
{
padding-top: 74px;
}
a.just-line + ul:before
{
height: 74px;
}
/*images and text inside a to be positioned left and right */
a.tip img
{
float: left;
font-family: Veranda;
}
a.tip h3
{
float: right;
}
/*Having the a position relative will help in showing Tooltip next to its element*/
a.tip
{
padding: 0;
position: relative;
}
/* Tooltip section */
a.tip span
{
display: none;
position: absolute;
top: 0;
left: 290px;
width: 525px;
padding: 5px;
z-index: 100;
background: #ffffcc;
color: Black;
border: 1px solid #ccc;
}
/*Tooltip pointer*/
a.tip span:before
{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid Black;
left: -8px;
top: 7px;
}
/*Tooltip hidden by default*/
a:hover.tip span
{
display: block;
}
</style>
<div class="tree">
<ul>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>Jrandom text goes here
</td>
</tr>
</tbody>
</table>
</span></a>
<ul>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger1
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>random text goes here
</td>
</tr>
</tbody>
</table>
</span></a>
<ul>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger2
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>random text goes here
</td>
</tr>
</tbody>
</table>
</span></a>
<ul>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger3
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>Jrandom text goes here
</td>
</tr>
</tbody>
</table>
</span></a></li>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger4
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>random text goes here
</td>
</tr>
</tbody>
</table>
</span></a></li>
<li><a class="tip" href="#">
<img src="pics/face.JPG" alt="" />
<h3>
<br />
<br />
Mark Sprenger5
<br />
Chief Operations Management</h3>
<span>
<table>
<tbody>
<tr>
<td align="left">
<strong>Name:</strong> someone someone
</td>
<td align="left">
<strong>Contact:</strong>0000
</td>
</tr>
<tr>
<td align="left">
<strong>Position:</strong> Chief Geographic Information Systems
</td>
<td align="left">
<strong>Email address:</strong> someone@someone
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td align="left" colspan="2">
<strong>Qualifications & Background: </strong>Jrandom text goes here
</td>
</tr>
</tbody>
</table>
</span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The code fails when i try to draw the connectors for example here:
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after
{
content: ''; /* headache*/
position: absolute; /* headache*/
top: 0;
right: 50%;
border-top: 1px solid #e1793f;
width: 50%;
height: 20px;
}
如果您能协助破解或解决方法，使其能够在IE8 +中运行，我将不胜感激。 非常感谢