我有一些选择和 <img>我在javascript中制作了所有元素，因为它们仅在单独的按钮单击上添加，并且不会影响下面的代码，因为我尝试过使用和不使用，但得到了相同的结果。这是我也包含在 JSBin 中的 html、css 和 Javascript因为它清楚地表明了这个问题，目前我已经在 Chrome 和 IE 上进行了测试，它在 Chrome 上运行良好，但在 IE 11.0.96 上崩溃，发生的情况是我有一个 select然后img然后select我想要 img在第一个选择旁边并有下一个 select下面，像这样
但在 IE 上，按钮会超出第二个 select 的顶部
这里是代码
<body>
<div id="hours_div"></div>
</body>
CSS:
#info_add_hours {
width: 50%;
}
.time_p {
display:inline;
margin-left:5px;
margin-right:5px;
}
.time_colon {
display:inline;
margin-left:5px;
margin-right:5px;
}
#hours_div select {
width: 88%;
}
#time_delete_small {
width:40px;
display:inline;
padding:5px;
margin-left:20px;
cursor: pointer;
position:absolute;
}
#hours_div .time_select {
width:23%;
}
#hours_div .ampm_select {
margin-left:5px;
width:23%;
}
JavaScript
function el(id) {
return document.getElementById(id);
} // Get elem by ID
var numOfHours = 0;
var div = document.createElement("DIV");
var div_id = "div_hours_" + numOfHours;
div.id = div_id;
//WEEKDAY
var select = document.createElement("SELECT");
var option_mon = document.createElement("OPTION");
option_mon.value = "monday";
var monday = document.createTextNode("Monday");
var option_tue = document.createElement("OPTION");
option_tue.value = "tuesday";
var tuesday = document.createTextNode("Tuesday");
var option_wed = document.createElement("OPTION");
option_mon.appendChild(monday);
option_tue.appendChild(tuesday);
select.appendChild(option_mon);
select.appendChild(option_tue);
//OPEN HOUR
var select_hour_open = document.createElement("SELECT");
select_hour_open.className = 'time_select';
var option_1_open = document.createElement("OPTION");
option_1_open.value = "1";
var option_1_text_open = document.createTextNode("1");
option_1_open.appendChild(option_1_text_open);
var option_2_open = document.createElement("OPTION");
option_2_open.value = "2";
var option_2_text_open = document.createTextNode("2");
option_2_open.appendChild(option_2_text_open);
select_hour_open.appendChild(option_1_open);
select_hour_open.appendChild(option_2_open);
var p_to = document.createElement("P");
p_to.className = 'time_p';
var to_text = document.createTextNode("to");
p_to.appendChild(to_text);
var close_img = document.createElement("IMG");
close_img.src = 'http://findicons.com/files/icons/2338/reflection/128/button_delete.png';
close_img.id = 'time_delete_small';
div.appendChild(select);
div.appendChild(close_img);
div.appendChild(select_hour_open);
div.appendChild(p_to);
el("hours_div").appendChild(div);
那么为什么按钮会超出第二个选择的顶部？
感谢您的帮助
最佳答案
之所以出现这种差异，是因为 IE 将 IMG 元素相对于其包含 block (DIV #div_hours_0) 定位为 block 元素，而 Firefox(至少)看起来将 IMG 元素相对于其所在位置定位如果没有定位，就会出现内联。 (我不知道这是否符合标准。)
将显示更改为阻止并添加“左”和“上边距”规则:
#time_delete_small {
width:40px;
display:block;
padding:5px;
margin-left:20px;
cursor: pointer;
position:absolute;
left: 88%;
margin-top: -10px;
}
似乎创建了帖子中显示的正确布局。请务必根据您的目的进行实验和调整!
关于javascript - <IMG> 不保持内联 - Javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34101787/