好的，所以我不想开始使用flexboxes，因为旧的浏览器支持问题，但我唯一可以让它在没有flexbox工作的情况下涉及浮点数，-margins，z-indexs，而且只是非常丑陋而且看不见。
话虽如此，使用flexbox，尽管设置了高度和宽度，左手日期块在IE和Chrome中都会扭曲其宽度和高度。
https://jsfiddle.net/yuum08d9/
<style>
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
margin: 0px 0px 30px;
}
#Experience .Experience {
box-sizing: border-box;
color: #404040;
display: flex;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover {
transform: translateX(20px);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-o-transform: translateY(-20px);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date {
height: 160px;
width: 172px;
position: relative;
display: block;
}
#Experience .Experience .Date div {
bottom: -1.5px;
transform: matrix(1, 0, 0, 1, 20, -20);
background: #f1f1f1;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date Div {
background: #4dbfd9;
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.05);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date h6 {
color: #262626;
letter-spacing: 0.8px;
font: normal normal bold normal 15px / 24.44px Roboto, sans-serif;
margin: 0px;
padding: 56.75px 0px;
text-align: center;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date h6 {
color: #fff;
transition: all 400ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date .Angle {
position: absolute;
right: 0;
top: 142px;
transform: matrix(1, 0, 0, 1, 20, 0);
border-top: 20px solid #DAD6D6;
border-right: 20px solid #fff;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
}
#Experience .Experience .WorkExperience {
box-shadow: rgb(221, 221, 221) 0.5px 0.5px 5px 0px;
box-sizing: border-box;
color: #404040;
font: 13px / 23px Roboto, sans-serif;
padding: 20px 55px;
text-align: left;
}
#Experience .Experience .WorkExperience h6 span {
font-size: 14px;
padding: 2px 0 0 10px;
}
#Experience .Experience .WorkExperience h6 {
color: rgb(38, 38, 38);
font-weight: 900;
font: 17px / 26px Roboto, sans-serif;
margin: 9px 0 0 0;
}
#Experience .Experience .WorkExperience p {
font: 13px / 23px Roboto, sans-serif;
}
#Experience .Experience .WorkExperience ul {
list-style:disc;
}
</style>
<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
<ul>
<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">August 2013 -<br />January 2015</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Information System Security Officer/Information System Security Engineer<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Collaborated with HQ to develop 15 new policies and update 28 procedures to include: contingency planning, user training, configuration management, and auditing, in accordance with JSIG/JAFAN PL-2 requirements; skilled at complex information systems, i.e. Multi-Program Interconnection, PL-2 systems, and above, development of IA Policies and Procedures, and preparation of C&A documents and procedures; lauded by PACAF inspectors as "most improved".</li>
<li>Coordinated massive network overhaul replacing/upgrading ~90% of network infrastructure in order to comply with PL-2 IS requirements achieving approximately 99.8% system uptime. (Up from 88%)</li>
<li>Developed and implemented custom scripts throughout entire IS enabling highly customized real-time auditing/reporting of all information systems (ISs) improving ISSM/ISSO awareness while meeting JSIG/JAFAN auditing requirements. </li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Communications Focal Point Technician<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Accountable for maintaining physical accountability of AFIN equipment, planning, and scheduling production, ordering, and management of materials, and track/order preventive maintenance.</li>
<li>Conducted Tier I/II help desk support; directly involved in the resolution of 500+ tickets.</li>
<li>Effectively provided technical support, in person, on phone and through online communication cutting ticket creation by approximately 12% in less than 3 months.</li>
<li>Successfully developed and implemented new ticket monitoring and reporting system cutting reporting time by nearly 80%.</li>
<li>Improved network vulnerability awareness by approximately 30% by effectively developing and implementing vulnerability and patching monitoring system.</li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Network Control Center Technician<span>U.S. Air Force</span></h6>
<p>System administrator of $318 million network for 35th Fighter Wing supporting 44 units throughout Japan. Responsibilities include managing core network services including Active Directory, Group Policy, DNS, and DHCP. Other responsibilities included system lifecycle management, vulnerability identification/remediation, and tier 3 support.</p>
<ul>
<li>Team leader for windows domain migration project, to incorporate local base network into Air Force Intra-Network (AFIN) -- lauded "Best to Date" migration by Higher Headquarters Communications and Information Director.</li>
<li>Developed the vulnerability management & mitigation rapid resolution program resulting in the identification and resolution of over 25,000 vulnerabilities in less than 2 weeks.</li>
<li>Developed Batch/PowerShell script suite used to identify/correct operating system errors, perform customized system maintenance, remediate patching shortfalls, and detect OS vulnerabilities resulting in 25% drop in tier 1 tickets and 22% improvement in patching, and improved system life cycle.</li>
</ul>
</div>
</div>
<!-- divider -->
</div>
答案 0 :(得分：4)
要使Date项保持其宽度而不缩小以适应（这是默认值），您需要设置flex-shrink: 0
#Experience .Experience .Date {
flex-shrink: 0; /* added */
height: 160px;
width: 172px;
position: relative;
display: block;
}
答案 1 :(得分：1)
我遇到过类似的flex问题，其中还包括absolutely positioned child divs inside flex containers in Firefox的问题。因此，我建议不要使用flex，因为你说的原因是跨浏览器兼容性。
所以我放弃了flex并使用了指标 vw，vh和vmin（vm for IE）。这些单元与视口绑定在一起，允许流畅的布局和优雅的代码。您甚至可以将这些单位与字体一起使用，以获得更具响应性的设计。
这里有一个JSFiddle来证明这一点。它可以在所有浏览器中运行，也可以响应。
这是代码
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
}
.H6{
text-align: center;
display: inline-block;
border: 2px solid #404040;
width: 20vw;
float: left;
background-color: #f1f1f1;
margin: 2vw;
}
.WorkExperience{
border: 2px solid #404040;
width: 50vw;
margin-left: 18vw;
padding: 2vw;
}<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
<ul>
<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
</ul>
</div>
</div>