I wanted to drag an image around inside a div, which I did using the jQuery UI draggable function.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQuery/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#dragme').draggable();
});
</script>
</head>
<body>
<div id="container" style="width:300px;height:300px;overflow:hidden;margin:auto;border:solid 1px black">
<img src="http://img.thesun.co.uk/multimedia/archive/01650/greats_1650266a.jpg" id="dragme" />
</div>
</body>
</html>
You can see the demo here. Works fine, however, the problem started when I hosted the same on IIS. When I use http:// localhost/mysite, the page works fine on Chrome and IE, however when I use http:// servername/mysite, on IE, the page goes for a toss. The entire image is shown on the div. (Snapshot).
I can still drag the image around, though.
I fail to understand why this happens. I have encountered problems in the past as well where the behavior of http:// localhost/mysite and http:// servername/mysite have been different.
Can anyone please explain why this is happening? Thanks in advance.
IE loads local web applications in compatibility view (IE9+) while external websites are being loaded in IE9+ standards view. This is the reason why you see your website locally in IE7 document mode. You can change this by hitting F12 and changing to IE9 document mode. If you want to make your IE load local site in regular view go to tools -> compatibility view settings and delete localhost from there.
来源：https://stackoverflow.com/questions/14252202/different-behaviors-while-using-localhost-and-server-name