相关疑难解决方法(0)

我不明白为什么FF和Chrome以不同的方式呈现我的页面.这是一个它的屏幕

firefox:firefox示例http://grab.by/65Bn

这是Chrome中的一个

chrome:chrome示例http://grab.by/65BB

fieldset具有相对位置,图像具有绝对位置.

这是基本结构:

<fieldset class="passenger-info">
  <legend>Passenger 1</legend>
  <div class="remove-me">
    <img src="/images/delete-icon-sm.png" />
  </div>
</fieldset>

基本上图像是在图例之后声明的.

这是fieldset的css:

.passenger-info {
  background:none repeat scroll 0 0 #F2F2F2;
  border:1px solid #9D240F;
  display:inline;
  float:left;
  margin-bottom:10px;
  margin-right:10px;
  padding:3px 10px;
  position:relative;
  width:350px;
}

并为我删除图像:

.remove-me {
  border:1px solid red;
  position:absolute;
  right:0;
  top:0;
}

这很奇怪.我尝试将字段集填充,并且图像向上移动了一点,但仍然没有在角落.

这篇文章表明FF确实在渲染场集方面存在问题.

http://www.codingforums.com/showthread.php?t=132624

有没有更好的方法来修复而不使用浏览器特定的黑客攻击？

我想把一个div放在一张桌子里面.父母有position: relative我的div las position: absolute.我通常使用chrome进行开发,它在那里工作得很好但是当我打开firefox时,我的绝对div忽略它的父级并占据整个页面.

这是一个在chrome中工作但不在firefox中的示例:http: //jsfiddle.net/pdFSh/

有任何想法吗？

我在使用jQuery创建菜单时遇到问题,我已经归结为下面的问题.此示例代码在Firefox和Chrome中的呈现方式不同:

HTML:

<table id="topTable">
    <tr>
        <td>
            <div id="outer">
                OuterDiv
                <div id="inner">
                    InnerDiv
                </div>
            </div>
        </td>
    </tr>
</table>

CSS:

#topTable {
    position: absolute;
    top: 50px;
}

#outer {
    background-color: Red;
}

#inner {
    background-color: Blue;
    position: absolute;
    top: 0px;
    left: 100px;
}

在Firefox中,"外部"元素在页面下方显示50px,但"内部"元素位于页面的最顶部.在Chrome中,"内部"div略高于50px,但远不及页面顶部.有人能解释为什么我会看到这种不同的行为吗？我注意到将"position:absolute"添加到"outer"元素会导致示例在每个浏览器上呈现相同的内容,但这会影响我实际菜单代码的样式.如果我能理解这里发生了什么,我可以弄清楚我需要采取哪些方向来修复我的实际代码.有任何想法吗？