chrome的样式问题，但在Firefox上可以正常使用

Question

我有一个主要隐藏的div，它是用javascript创建的。 问题在于，如图所示，div在Firefox中浮动，但不在chrome上浮动

这是我的代码：CSS：

.broken_image_name_div {
display: inline-block;
position: relative;
width: 510px;
margin-top: 10px;
background: red;

}

并使用javascript创建了整个弹出窗口：

// Function that pops up report broken feature
function reportBrokenPopup(userFromId) {
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('reportBrokenFeatureBox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5) +"px";
dialogbox.style.top = "150px";
//dialogbox.style.display = "block";
document.getElementById('reportBrokenFeatureBoxhead').innerHTML = "Report a Problem";
document.getElementById('reportBrokenFeatureBoxbody').innerHTML = '<form method="post" action="" class="report_broken_form" id="report_broken_form"><div>Where is the problem?</div><select name="broken_feature_select" class="broken_feature_select" id="broken_feature_select"><option selected>Select a Product</option><option>Comments and suggestions</option><option>Contact Us</option><option>Friend Requests</option><option>Home</option><option>Login form</option><option>Messages or Chat</option><option>Notifications</option><option>Privacy</option><option>Profile</option><option>Search</option><option>Sign up form</option><option>Other</option></select><div class="broken_report_happened">What happened?</div><textarea rows="4" cols="52" name="broken_report_textarea" class="broken_report_textarea" id="broken_report_textarea" placeholder="Briefly explain what happened..."></textarea><div class="broken_detail_error"></div><div class="broken_optional_word">Upload a Screenshot (Optional)</div><div class="broken_upload_div" title="Choose a file to upload"><label for="broken_file_upload"><span class="broken_image_upload_icon"></span><span id="brokenImageUploadWord">Upload Screenshot</span></label><input type="file" name="broken_image" class="broken_file_input" id="broken_file_upload"/></div><div class="broken_image_name_div"></div></form>';
document.getElementById('reportBrokenFeatureBoxfoot').innerHTML = '<input type="submit" name="broken_submit_button" value="Send" class="report_broken_send_button"/><button id="report_broken_cancel_button">Cancel</button>';
$("body").css("overflow", "hidden");
$("#reportBrokenFeatureBox").fadeIn();

$("#broken_file_upload").on("change", function(e){
    var filename = e.target.value.split("\\").pop();
    $(".broken_image_name_div").text(filename);

});

$("#report_broken_cancel_button").on("click", function(){
    $("#reportBrokenFeatureBox").fadeOut();
    $("#dialogoverlay").fadeOut();
    setTimeout(function(){
        $("body").css("overflow", "scroll");
    }, 200);    
});

}

这是一个小提琴，但是在选择图像后它没有显示文件名！ https://jsfiddle.net/3wafLpto/2/

Answer 1

我解决了，回头并强制问题出在缓存中！ 我必须清除缓存以使页面呈现良好！ 谢谢您的帮助