Chrome上で奇妙な動作をするイメージタグ

Question

私は、ASPスクリプトによって生成された、古いがシンプルなhtml/cssページにバーコードがあります。問題は、Internet ExplorerとChromeでバーコードの外観が異なることです。 html/cssコードは非常に単純ですが、私は何が起こっているのか理解できません。既に成功していない、いくつかの修正を試みました。 :(私は2枚のGIF画像持っているバーコードを生成するための

：

をそしてHTML/CSSは、このように簡単です：Internet Explorerで

<style type="text/css"> 
    img.barcode { 
     border: 0; 
     padding: 0; 
     margin: 0; 
    } 
</style> 

<tr> 
    <td width="659" colspan="2" style="background-color:#FFFFFF;"> 
     <img src="imagens/p.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="images/b.gif" class="barcode" class="barcode" style="width:1px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="images/b.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img 

     ... 

     src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img 
     src="imagens/b.gif" class="barcode" style="width:3px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="imagens/b.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:3px;height:50px;"><img 
     src="images/b.gif" class="barcode" style="width:1px;height:50px;"><img 
     src="images/p.gif" class="barcode" style="width:1px;height:50px;"> 
    </td> 
</tr> 

それはperfectyに動作します：

しかし、Google Chromeで私はこれを持っている：

、誰もが起こっているとどのように解決することである知っているしてください？

ありがとうございます！

Answer 1

Chromeは、「画像が見つかりません」画像を表示しています。 b.gifはimagens/ではありません。images/

Answer 2

はこれにあなたのスタイルを変更

：IEは何も表示されませんが

<style type="text/css"> 
    td { 
     font-size: 0; /* there would be no spacing when images are rendered. */ 
    } 
    img.barcode { 
     border: 0; 
     padding: 0; 
     margin: 0; 
     display: inline-block; /* Chrome default is inline */ 
     vertical-align: top; /* ensure that all images stand at the top. */ 
    } 
</style> 

Answer 3

FWIWは、flexboxを使用したCSSのみのアプローチです。

.barcode { 
 
    display: flex; 
 
} 
 
.barcode > div { 
 
    width: 1px; 
 
    height: 50px; 
 
    background-color: black; 
 
} 
 
.barcode .lg { 
 
    width: 3px; 
 
} 
 
.barcode .invert { 
 
    background-color: white; 
 
}

<div class="barcode"> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div class="lg"></div> 
 
    <div class="invert lg"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div class="lg"></div> 
 
    <div class="invert lg"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div class="lg"></div> 
 
    <div class="invert lg"></div> 
 
    <div></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
    <div class="invert lg"></div> 
 
    <div class="lg"></div> 
 
    <div class="invert"></div> 
 
    <div></div> 
 
</div>

すべてのDIVにはバーです。次に、バーがであることが "反転"（白）以上である必要があるかどうかを定義します。