我开发了一组图像的悬停效果。一旦您将鼠标悬停在上面，它就会显示一些信息。这是代码:
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;}
问题在于此代码在 Microsoft Edge、Internet Explorer 和 Firefox 上运行良好，但在 Google Chrome 上无法正常呈现。我清除了 Chrome 浏览器上的缓存，但问题仍然存在。我附上了它的 JSFiddle。
最佳答案
我想我看到了问题所在。尝试提供 figcaption width: 100%; 而不是 right: 0;。
JSFiddle:https://jsfiddle.net/b627h6ce/14/
关于html - 无法在 Google Chrome 中正确呈现此代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42377083/