Fatal编程技术网
  • javascript/
  • <；IMG>；不保持内联-Javascript

<；IMG>；不保持内联-Javascript

javascript jquery html css

<；IMG>；不保持内联-Javascript,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一些选择和一个，我在javascript中创建了所有元素，因为只有在一个单独的按钮上单击才能添加这些元素，并且不会影响下面的代码，因为我尝试了使用和不使用，得到了相同的结果。这是我还包括的html、css和Javascript，因为它清楚地表明了这个问题，目前我已经在Chrome和IE上进行了测试，它在Chrome上运行良好，但在IE 11.0.96上出现故障，发生的情况是，我有一个select然后img然后select，我希望img在第一个select旁边，然后让下一个select如下所示

我有一些选择和一个
，我在javascript中创建了所有元素，因为只有在一个单独的按钮上单击才能添加这些元素，并且不会影响下面的代码，因为我尝试了使用和不使用，得到了相同的结果。这是我还包括的html、css和Javascript，因为它清楚地表明了这个问题，目前我已经在Chrome和IE上进行了测试，它在Chrome上运行良好，但在IE 11.0.96上出现故障，发生的情况是，我有一个
select
然后
img
然后
select
，我希望
img
在第一个select旁边，然后让下一个
select
如下所示

但在IE上，该按钮位于第二个
选择按钮上方

这里是代码


<body>
  <div id="hours_div"></div>

</body>


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元素定位为与其包含的块（DIV#DIV_hours_0）相关的块元素，而Firefox（至少）将IMG元素定位为与它在没有定位的情况下显示的内联位置相关的块元素。（我不知道这是否符合标准。）

将显示更改为块并添加“左”和“页边距顶部”规则：


似乎创建了文章中显示的正确布局。为了你的目的，一定要尝试和调整它们
 对于IE 11.0.96，您需要更改设置，请转到工具->兼容性视图设置->单击“添加”按钮，它现在将与IE兼容
我不知道错误的原因，但您可以将所有元素包装在一个div中，并使图像位置为：绝对。在div的右侧添加一些填充物，以使其他元素远离它。@RickyGoldman我有一个div中的所有元素，我有一个div的
位置：绝对
image@spenf10您的时间\u删除\u小元素有一个问题规则它有一个内联但它是绝对位置。。。。这不是很好地删除绝对或删除内联。还有一个问题是，你没有右上角或任何你需要的位置。但是如果你在IE和Firefox中为我更改屏幕大小，将其设置为阻止将不再有效。铬会发生什么？

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



#time_delete_small {
    width:40px;
    display:block;
    padding:5px;
    margin-left:20px;
    cursor: pointer;
    position:absolute;
    left: 88%;
    margin-top: -10px;
}