Chrome和Firefox中保留边缘的不同行为?

时间:2012-04-27 09:33:16

标签: css cross-browser

我遇到两个不同浏览器的问题。我附上了问题的快照: 当我使用以下css时,我得到image1:

.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
    height: 29px;
    width: 234px;
    position: absolute;
}

form#saveSupport input{float: left; width: 243px;}

/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
   width: 223px; position: absolute; height: 29px; line-height:29px;
   padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden; 
} 

enter image description here

当我向margin-left: 18%添加form#saveSupport .select_game时,Chrome会显示下拉列表图片的正确对齐方式,但不会显示实际的下拉列表,而Firefox会将drodown列表替换为右侧。 (Image2)enter image description here

请帮助我解决问题。我会很感激的!

谢谢, 维克拉姆

1 个答案:

答案 0 :(得分:1)

您好我认为您将position:relative设置为父元素和子元素集position:relative

我认为你的父母就是这个

.support-data-text{
position:relative;
}

现在设置为子div绝对位置,并根据您的设计设置为左上角