0
我對一組圖像開發了懸停效果。一旦你做了一個鼠標，它會顯示一些信息。下面是代碼：無法在Google Chrome中正確呈現此代碼
HTML
<ul class="photo-grid">
<li>
<a href="https://www.abglobal.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1773 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/101ABGlobal.png" alt="Client SoHo Dragon" alt="Client" width="125" height="125" />
<figcaption><p>AB is a leading global investment-management and research firm. We bring together a wide range of insights, expertise and innovations to advance the interests of our clients around the world.</p></figcaption>
</figure>
</a>
</li><li>
<a href="http://www.morganstanley.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1774 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/102MorganStanley-e1484752671108.png" alt="Client SoHo Dragon" width="125" height="125" />
<figcaption><p>At Morgan Stanley, we advise, originate, trade, manage and distribute capital for governments, institutions and individuals, and always do so with a standard of excellence.</p></figcaption>
</figure>
</a>
</li><li>
<a href="https://www.mizuho-sc.com" target="_blank">
<figure>
<img class="alignnone wp-image-1775 size-full" title="Client SoHo Dragon" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/103Mizuho.png" alt="Mizuho" width="125" height="125" />
<figcaption><p>Mizuho Securities is an investment bank that offers optimal solutions for a broad range of clients using its global network of businesses.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.eminencecapital.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1776 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/105Eminence.png" alt="105Eminence" width="125" height="125" />
<figcaption><p>Eminence Capital is a New York based hedge fund.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.kgsalpha.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1777 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/106KGS.png" alt="106KGS" width="125" height="125" />
<figcaption><p>KGS-Alpha is an independent broker-dealer that provides premiere financial services to an institutional client base.</p></figcaption>
</figure>
</a>
</li><li><a href="http://greenpages.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1778" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/111GreenPages-150x150.png" alt="111GreenPages" width="125" height="125" />
<figcaption><p>Green Pages' Cloud Solutions solve traditional IT challenges in new ways.</p></figcaption>
</figure>
</a>
</li><li><a href="www.incyte.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1779" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/112Incyte-150x150.png" alt="112Incyte" width="125" height="125" />
<figcaption><p>Incyte is a science-led biopharmaceutical research company specializing in oncology product development and innovative medicines that are used worldwide.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.gilbaneco.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1780" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/113Gilbane-150x150.png" alt="113Gilbane" width="125" height="125" />
<figcaption><p>Gilbane, Inc. is a builder and developer of some of the most highly visible projects domestically and internationally.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mbpce.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1781" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/114MBP-150x150.png" alt="114MBP" width="125" height="125" />
<figcaption><p>MBP provides a wide range of cost-effective services in construction management and dispute resolution.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.cbi.com/Home" target="_blank">
<figure>
<img class="alignnone wp-image-1782" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/115CBI-150x150.png" alt="115CBI" width="125" height="125" />
<figcaption><p>CB&I is the world leader of fabricated piping systems.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www1.nyc.gov/site/nycha/index.page" target="_blank">
<figure>
<img class="alignnone wp-image-1783" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/116NYCHA-150x150.png" alt="116NYCHA" width="125" height="125" />
<figcaption><p>The New York City Housing Authority's mission is to increase opportunities for low- and moderate-income New Yorkers by providing safe, affordable housing and facilitating access to social and community services.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.flickr.com/photos/aigle_dore/5238557764/" target="_blank">
<figure>
<img class="alignnone wp-image-1784" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/119SmartMoney-150x150.png" alt="119SmartMoney" width="125" height="125" />
<figcaption><p>Smart Money</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mdc-partners.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1785" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/120MDC-150x150.png" alt="120MDC" width="125" height="125" />
<figcaption><p>MDC Partners Inc. is an advertising and marketing holding company based in New York City.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.mcgraw-hill.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1786" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/121McGrawHill-150x150.png" alt="121McGrawHill" alt="120MDC" width="125" height="125" />
<figcaption><p>Global publishing, financial, information and media services. Includes details of markets, careers and investor services.</p></figcaption>
</figure>
</a>
</li><li><a href="www.wrox.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1787" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/122Wrox-150x150.png" alt="122Wrox" width="125" height="125" />
<figcaption><p>Wrox is a leading information provider for programmers. Publishing books written for programmers by programmers.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.linkedin.com/company/kavoo"target="_blank">
<figure>
<img class="alignnone wp-image-1788" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/123Kavoo-150x150.png" alt="123Kavoo" width="125" height="125" />
<figcaption><p>Kavoo provides private air charter flight services; and SkyLimo, an air taxi service</p></figcaption>
</figure>
</a>
</li><li><a href="https://home.kpmg.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1789" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/124KPMG-150x150.png" alt="124KPMG" width="125" height="125" />
<figcaption><p>KPMG provides audit, tax and advisory services. We work closely with our clients, helping them to mitigate risks and grasp opportunities.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.pwc.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1790" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/125PWC-150x150.png" alt="125PWC" width="125" height="125" />
<figcaption><p>PWC focuses on audit and assurance, tax and consulting services. We help resolve complex issues and identify opportunities.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.akaes.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1791" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/126AKA-150x150.png" alt="126AKA" width="125" height="125" />
<figcaption><p>AKA Enterprise Solutions provides Microsoft Dynamics solutions for Financial Services, Media & Entertainment, Life Sciences, and the Public Sector.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.airforce.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1792" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/127USAF-150x150.png" alt="127USAF" width="125" height="125" />
<figcaption><p>The United States Air Force is the aerial warfare service branch of the United States Armed Forces.</p></figcaption>
</figure>
</a>
</li><li><a href="http://oysterbaytown.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1793" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/128OysterBay-150x150.png" alt="128OysterBay" width="125" height="125" />
<figcaption><p>The Town of Oyster Bay is easternmost of the three towns in Nassau County, New York, in the United States.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.shu.edu/" target="_blank">
<figure>
<img class="alignnone wp-image-1794" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/129SetonHall-150x150.png" alt="129SetonHall" width="125" height="125" />
<figcaption><p>Seton Hall University is a private Roman Catholic university in South Orange, New Jersey, United States.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.robinhood.org/" target="_blank">
<figure>
<img class="alignnone wp-image-1795" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/130RobinHood-150x150.png" alt="130RobinHood" alt="126AKA" width="125" height="125" />
<figcaption><p>Robin Hood has a single objective: end poverty in NYC.</p></figcaption>
</figure>
</a>
</li><li><a href="http://www.itg.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1796" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/163-ITG-150x150.png" alt="163 ITG" width="125" height="125" />
<figcaption><p>Investment Technology Group, Inc. is a global financial technology company that helps leading brokers and asset managers improve returns for investors around the world. </p></figcaption>
</figure>
</a>
</li><li><a href="http://www.foxnews.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1797" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/164FoxNews-150x150.png" alt="164FoxNews" width="125" height="125" />
<figcaption><p>FOX News Channel is a 24-hour all-encompassing news service dedicated to delivering breaking news as well as political and business news.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.dowjones.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1798" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/165DowJones-150x150.png" alt="165DowJones" width="125" height="125" />
<figcaption><p>Dow Jones brings together world-leading data, media, membership and intelligence solutions to power the most ambitious companies and professionals</p></figcaption>
</figure>
</a>
</li><li><a href="http://nj.gov/dca/" target="_blank">
<figure>
<img class="alignnone wp-image-1799" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/166StateOfNJ-150x150.png" alt="166StateOfNJ" width="125" height="125" />
<figcaption><p>The New Jersey Department of Community Affairs is created to provide administrative guidance, financial support and technical assistance to local governments, community development organizations, businesses and individuals to improve the quality of life in New Jersey.</p></figcaption>
</figure>
</a>
</li><li><a href="www.greenhill.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1800" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/167GreenHill-150x150.png" alt="167GreenHill" alt="163 ITG" width="125" height="125" />
<figcaption><p>Greenhill is a leading independent investment bank focused on providing financial advice globally on significant mergers, acquisitions, restructurings, financings and capital advisory to corporations, partnerships, institutions and governments.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.ironwoodpharma.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1801" src="http://www.sohodragon.nyc/wp-content/uploads/2016/12/168Ironwood-150x150.png" alt="168Ironwood" width="125" height="125" />
<figcaption><p>Ironwood Pharmaceuticals focuses on three goals: transforming knowledge into medicines that make a difference for patients, creating value that will inspire the continued support of our fellow shareholders, and building a team that passionately pursues excellence.</p></figcaption>
</figure>
</a>
</li><li><a href="https://www.foodcity.com/" target="_blank">
<figure>
<img class="alignnone wp-image-1808 size-full" src="http://www.sohodragon.nyc/wp-content/uploads/2017/01/169FoodCity-e1484754247113.png" alt="169FoodCity" width="125" height="125" />
<figcaption><p>Food City is an American supermarket chain with stores located in Georgia, Kentucky, Tennessee, and Virginia.</p></figcaption>
</figure>
</a>
</li>
</ul>
CSS
.photo-grid {
overflow:auto;
max-width: 700%;
text-align: center;
}
.photo-grid li {
display: inline-block;
width: 125px;
}
.photo-grid img {
display: block;
float: left;
height: auto;
max-width: 100%;
}
.photo-grid figure {
height: 125px;
overflow: hidden;
position: relative;
width: 125px;
}
.photo-grid figcaption {
background: rgba(0,0,0,0.8);
color: white;
display: table;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
.photo-grid figcaption p {
display: table-cell;
font-size: 0.7em;
position: relative;
top: -5px;
width: 125px;
vertical-align: middle;
}
.photo-grid li:hover figcaption {
opacity: 1;
}
.photo-grid figure {margin:0;width:auto;}
.photo-grid li { width: auto;}
的問題是，這個代碼可以工作得很好微軟邊緣，Internet Explorer和Firefox，但它並沒有呈現在正確谷歌瀏覽器。我清除了Chrome瀏覽器上的緩存，但問題仍然存在。我已經附加了JSFiddle。
該問題是各行或如何figcaption被渲染的空間？ – mikeg542
它似乎在我的Chrome上運行得很好 – AVAVT
有什麼問題？它適用於Chrome 56.0.2924.87（64位）和masOS 10.12.3。 –