Question

我有一个旧的但很简单的带有条形码的html / css页面，它是由ASP脚本生成的。问题是条形码在Internet Explorer和Chrome上有不同的外观。 html / css代码非常简单，但我无法理解发生了什么。已经尝试了一些修改，没有成功。：（

为了生成条形码，我有2个gif图像：

HTML / CSS很简单：

<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>

在Internet Explorer中，它完美无缺：

但在谷歌浏览器中我有这个：

拜托，有谁知道发生了什么以及如何解决？

谢谢！

Answer 1

Chrome正在显示“未找到图片”图片，而IE则不会显示任何内容。您的b.gif不在imagens/，而在images/

Answer 2

将您的风格改为：

$(document).ready(function() {
  $("#frm").submit(function(e) {
    e.preventDefault();
    var val=$(this).find("button[type=submit]:focus").attr("class");/* this selects the class of button which trigger submit event */
    alert(val)
  });
});

Answer 3

FWIW，这是使用flexbox的唯一CSS方法。

＆＃13;

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

＆＃13;

<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>

＆＃13;

每个DIV都是一个酒吧。然后定义栏是否需要＆＃34;倒置＆＃34; （白色）和/或更厚。

Chrome上有奇怪行为的图片代码

3 个答案: