svg - Why, when I read the bootstrap3css, do you change the value that the browser returned by jQuery offset method? -

why, when read bootstrap3css, change value browser returned jquery offset method?

value browser returned jquery offset method becomes point.

which correct?

how match?

---

chrome

44.0.2403.157 m

---

do not read bootstrap3css

<style> svg {   border: 1px solid #ddd; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <svg preserveaspectratio="none" viewbox="0 0 2000 400" width="500" height="400">   <rect id="hoge" x="50" y="50" width="50" height="50"/> </svg> <script>   console.log($("#hoge").offset()); //object {top: 59, left: 21.5} </script> 

---

read bootstrap3css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> svg {   border: 1px solid #ddd; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <svg preserveaspectratio="none" viewbox="0 0 2000 400" width="500" height="400">   <rect id="hoge" x="50" y="50" width="50" height="50"/> </svg> <script>   console.log($("#hoge").offset()); //object {top: 50.75, left: 13.449999809265137} </script> 

simply because bootstrap sets body's margin 0:

//in bootstrap.min.css: body {     margin: 0; } 

without loading bootstrap, chrome sets body's margin 8px default:

//user agent stylesheet(chrome) body {     display: block;     margin: 8px; } 

update: okay here's fix. svg of same position whether load bootstrap or not, create custom stylesheet style.css add these lines ones in bootstrap.min.css:

//custom body style     body {     margin: 0; } 

don't forget load in page.