<span>标记在IE7中打破行</span>

时间:2010-10-18 11:52:57

标签: html html-table row internet-explorer-7

我的代码如下:

<table>
    <tr>
        <td>
            <div id='lunch'><a href='Lunchplace.aspx?c=1&id=110'><img style='margin-top: 3px;' src='./images/115x52_Brasseriet.jpg'class='imagealign'/><b>Brasseriet</b><br />Köttbullar med gräddsås & kokt pota...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>80 Kr<span style='float:right;'>70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />Kycklinggryta med örtcremefraishe &...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>80 Kr<span style='float:right;'>70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />Paj, Lasagne, Räksallad, Kycklingsa...&nbsp;<span style='color:#f29400;font-size:small;float:right;'>79 Kr<span style='margin-right:40px'></span></span></div>
        </td>
    </tr>
    <tr>
        <td><img src='./images/siteimages/linje_430.jpg'/></td>
    </tr>
</table>

它在ie7中看起来很糟糕,所有其他浏览器都渲染它是正确的,但似乎ie7在跨距处进行换行,即使跨距是内联元素。我添加一张图片以便你理解!

example of problem http://img2.imageshack.us/img2/3130/humm.png

我相信你能看到我的问题!

作为对火箭ronny的回复 下面是现在看起来的代码(自动生成一些部分)

 Lunches = Lunches + "<table cellspacing='0' cellpadding='0' width='500px;'><tr> <td><div id='lunch'><a href='Lunchplace.aspx?c=1&id=110'><img style='margin-top:3px;' src='./images/" + Img + "'class='imagealign'/><strong>" + k.Name + "</strong><br />" + checkLength(k.Monday) + "&nbsp;" + "<span style='color:#f29400; font-size:small; float:right;'>" + checkZero(k.Monday, k.PriceMonS, 1).ToString + checkZero(k.Monday, k.PriceMonGet, 2).ToString + "</span>&nbsp;&nbsp;&nbsp;&nbsp;</span><br />" + checkLength(k.Monday2) + "<span style='color:#f29400; font-size:small;float:right;'>" + checkZero(k.Monday2, k.PriceMon2S, 1).ToString + checkZero(k.Monday2, k.PriceMon2Get, 2).ToString + "</span>&nbsp;&nbsp;&nbsp;&nbsp;<br />" + checkLength(k.Monday3) + "<span style='color:#f29400;font-size:small;float:right;'>" + checkZero(k.Monday3, k.PriceMon3S, 1).ToString + checkZero(k.Monday3, k.PriceMon3Get, 2).ToString + "</span></div></td></tr><tr><td><img src='./images/siteimages/linje_430.jpg'/></td></tr></table>"

这是您说的代码可以使用,但它看起来和往常一样。

这是自动生成的原始代码:

Lunches = Lunches + "<table> <tr> <td><div id='lunch'>" + "<a href='Lunchplace.aspx?c=" + city.ToString + "&id=" + k.ResturantID.ToString() + "'><img style='margin-top: 3px;' src='./images/" + Img + "'class='imagealign'/>" + "<b>" + k.Name + "</b>" + "<br />" + checkLength(k.Monday) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right;'>" + checkZero(k.Monday, k.PriceMonS, 1).ToString + checkZero(k.Monday, k.PriceMonGet, 2).ToString + "</span><br />" + checkLength(k.Monday2) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right'>" + checkZero(k.Monday2, k.PriceMon2S, 1).ToString + checkZero(k.Monday2, k.PriceMon2Get, 2).ToString + "</span><br />" + checkLength(k.Monday3) + "&nbsp;" + "<span style='color:#f29400;font-size:small;text-align:right;'>" + checkZero(k.Monday3, k.PriceMon3S, 1).ToString + checkZero(k.Monday3, k.PriceMon3Get, 2).ToString + "</span></div></td></tr><tr><td><img src='./images/siteimages/linje_430.jpg'/></td></tr></table>"

2 个答案:

答案 0 :(得分:4)

你的'内部'跨度有一个浮点数的css属性:对; - 这导致IE中的换行符

以下代码应该有效。

<table cellspacing="0" cellpadding="0"> 
    <tr> 
        <td>
            <div id="lunch">
                <a href='Lunchplace.aspx?c=1&id=110'><img style="margin-top: 3px;" src="./images/115x52_Brasseriet.jpg'class='imagealign"/><strong>Brasseriet</strong>
                <br />Köttbullar med gräddsås &amp; kokt pota... &nbsp; <span style="color:#f29400; font-size:small; float:right;">80 Kr<span style="margin-left:20px;">70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <br />Kycklinggryta med örtcremefraishe &amp;... &nbsp; <span style="color:#f29400; font-size:small;float:right;">80 Kr<span style="margin-left:20px;">70 Kr</span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <br />Paj, Lasagne, Räksallad, Kycklingsa... &nbsp; <span style='color:#f29400;font-size:small;float:right;'>79 Kr<span></span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            <img src='./images/siteimages/linje_430.jpg'/>
       </td>
    </tr>
</table>

答案 1 :(得分:1)

因为“浮动:正确”,你的行正在崩溃您在span元素上的CSS属性。可能在你的TD标志中添加style =“clear:both”将解决这个问题