IE8在標準模式下忽略零寬度空間

我有一個帶有可變寬度單元格的表格，我想讓瀏覽器在斜線前插入一個換行符而不強制它。我在斜槓前插入了一個零寬度空間（ZWSP）字符，並在除IE6和IE8以外的所有瀏覽器中都正常工作。IE8在標準模式下忽略零寬度空間

對於IE6，我使用一些Javascript來代替字符< >標籤 - 不是最優雅的解決方案，但它的工作原理。

在IE8中，我還沒有找到解決它的實際方法。它弄亂了我桌子的佈局。我發現它不僅限於表格。它似乎與任何一種元素髮生。瀏覽器拒絕承認ZWSP，而是選擇讓文本流出框，這看起來很醜。我已經注意到，我可以通過將它放入兼容性視圖來使瀏覽器正確處理它，但這對我造成了其他問題。

有誰知道一個簡單而實用的方法，使ZWSP在IE8中的行爲方式？

您可以使用此代碼來測試問題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<title>zwsp test</title> 
</head> 
<body> 
<div style="width: 50px; border: solid black 1px; font-size: 15px"> 
    Miles&#8203;/gallon 
</div> 
</body></html>

來源

2009-09-25 Elias Zamaria

我建議做兼容性視圖站點剩下的工作，因爲有些人仍然使用IE7和會得到破碎的佈局。國際海事組織，更好的工作在IE7比不工作在IE7和工作在IE8。 – strager 2009-09-25 23:37:02

它在IE7中正常工作。我試圖使它在IE8中工作，最好不強制兼容模式。 – 2009-09-25 23:40:24

你見過這個討論嗎？ http://groups.google.com/group/comp.infosystems.www.authoring.html/browse_thread/thread/4f276215889c0b94/ – kangax 2009-09-26 01:54:45

我懷疑這可能是IE8的錯誤。我可以誘導你想要的行爲的唯一方法是改變斜線爲師反斜線（\ u2215）：

Miles&#8203;&#x2215;gallon

出於某種原因，IE8不喜歡斜線近在咫尺。

來源

2009-09-26 00:08:14 ferdley

看起來你總是可以指望微軟讓事情變得複雜。對於他們在IE8中修復的每個bug，似乎他們引入了一個新的bug。無論如何，我試過你的解決方案，它的工作。謝謝。 – 2009-09-28 18:17:56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
<title>zwsp test</title> 
<style type="text/css" media="screen"> 
    .zwsp { 
     display: -moz-inline-box; /* Firefox before 3.0 */ 
     height: 1px; /* Firefox before 3.0 screws up line height */ 
     display: inline-block; /* Standards-based browsers (and IE!) */ 
     overflow: hidden; /* In most cases will prevent weird spacing due to font sizes */ 
     width: 1px; /* Must take up some space to appear in layout */ 
     margin-left: -1px; /* Cancel the space it takes up */ 
    } 
</style> 
</head> 
<body> 
<!-- Wide (without space) --> 
<div style="width: 100px; border: solid black 1px; font-size: 15px"> 
    Miles/gallon 
</div> 
<!-- Wide (with space) --> 
<div style="width: 100px; border: solid black 1px; font-size: 15px"> 
    Miles<span class="zwsp"> </span>/gallon 
</div> 
<!-- Narrow (with space) --> 
<div style="width: 50px; border: solid black 1px; font-size: 15px"> 
    Miles<span class="zwsp"> </span>/gallon 
</div> 
</body></html>

編輯：這種方法的缺點是，當然，前提是文本本身被改變。這可能會影響搜索引擎結果中顯示的內容。當然，你可以在沒有.zwsp元素的情況下爲蜘蛛服務。由您決定這件事的重要性，以及在其他情況下是否存在其他情況下實際空間字符的存在可能會影響其他情況下的輸出。

來源

2009-09-26 00:39:57 eyelidlessness

您的解決方案看起來很聰明，但對我來說太複雜和難以理解。有一天我可能會出於好奇嘗試它，但我可能不願意在我的網站上使用它。我不認爲值得引入這麼複雜的工作來解決相當小的IE8渲染錯誤。 – 2009-09-28 18:15:55

適合自己，但我真的不明白什麼是如此複雜的類名跨度。 – eyelidlessness 2009-09-28 18:21:15

這些事情的複雜性之一，特別是適用於斜槓等複製/粘貼將拿起隱藏的空間，所以如果你複製它的URL會破壞。不適用於所有場景，但對分詞標記有利的是它對剪貼板友好。 – TheXenocide 2010-06-30 14:19:52

我看到同樣的問題是IE11。 @ferdley的解決方案可行，但是常規斜槓和&＃x2215看起來稍有不同。

我的解決方法是隻需添加上一個和斜線之間，即另一個零寬度空間，

Miles&#8203;&#8203;/gallon

來源

2015-12-04 23:27:52 shaosh

IE8在標準模式下忽略零寬度空間

回答

相關問題