他のブラウザよりもクロムの動作が異なる

Question

私はニュースの見出しのリストを含むウェブサイトを持っています。ほとんどのブラウザでは、これらのリンクは正しく折り返されますが、Google Chromeではテキストがコンテナを超えています。 Firefoxと下のクロムの例...

Firefox http://www.mattconnolly.com/Examples/news-firefox.jpg Chrome http://www.mattconnolly.com/Examples/news-chrome.jpg

HTMLは、UL /李リンクのリストだけです...

<ul> 
<li> 
<a href="http://www.iiwengr.com/2016/05/23/tranmer-returns-to-iiw-as-surveying-technical-specialist/">TRANMER RETURNS TO IIW AS SURVEYING TECHNICAL SPECIALIST</a> 
<span class="post-date">May 23, 2016</span> 
</li> 
<li> 
<a href="http://www.iiwengr.com/2016/05/16/jasper-joins-iiw-as-construction-leader/">JASPER JOINS IIW AS CONSTRUCTION LEADER</a> 
<span class="post-date">May 16, 2016</span> 
</li> 
<li> 
<a href="http://www.iiwengr.com/2016/05/11/changing-a-citys-narrative-with-a-streetscape/">CHANGING A CITY’S NARRATIVE</a> 
<span class="post-date">May 11, 2016</span> 
</li> 
</ul> 

ここで適用されているいくつかのCSSです。.. ul { マージン：0; パディング：0; 幅：100％; }

ul li { 
    border-bottom: 1px solid #dedfe0; 
    list-style-type: none; 
    padding-bottom: 5px; 
    padding-left: 8%; 
    padding-top: 5px; 
    text-align: left; 
} 

ul li a { 
    color: black; 
    display: block; 
    font-size: 1.1em; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 80%; 
    word-wrap: break-word; 
} 

一貫性のある結果を得る方法についてのアドバイスをいただければ幸いです。

Answer 1

コードで犯人が実際に問題には含まれていなかったので、私は問題を見つけるために、現場に行かなければなりませんでした。

しかし、あなたは、このビットを削除する場合：

#home-widget-three #secondary .widget ul li a:after { 
    content:"\a"; 
    white-space: pre; 
} 

ライン331からのstyle.cssにそれはあまりにもChromeでよさそうです。そのコードが何をすべきかわからないのですか？ < 100％の幅が、あまりにも右側にliパディングを与える代わりにli aとli spanの両方を与えるのも

、。より洗練された、より保守的なイモ。

Answer 2

は、あなたのタグにdisplay: inline-blockとword-break: break-word;を追加します。

ul li a { 
    display: inline-block; 
    word-break: break-word; 
}