Geek asks and answers

Firefox css moz-transform scales down a div, border information is lost

Open the bottom html in firefox, you can see that the right and bottom borders are missing, but Chrome / IE is good, is it a bug in firefox, or can I use some other method to make it look the same with Chrome / IE?

<!DOCTYPE html>
<html>
<head>

<style> 
* {font-size:20px}
div
{
   width:400px;
   height:400px;
   background-color:lightgreen;
   border:1px solid black;
   transform-origin:0 0;
   -moz-transform-origin:0 0;
   -ms-transform-origin:0 0;
   -webkit-transform-origin:0 0;
   transform:scale(0.7);
   -moz-transform:scale(0.7);
   -ms-transform:scale(0.7); 
   -webkit-transform:scale(0.7); 
}
</style>

</head>
<body style='margin:10px;padding:10px'><div>Hello. This is a DIV element.</div>
</body>
</html>
+3
source share
1 answer

There are many problems with box-model if you use scale to reduce the size of the div.

Here is my solution:

http://jsfiddle.net/zHpbm/1/

div { 
 padding:1px;
}

add 1px debugging to your div and the frame model will revert to its normal size.

Be careful, I only fix it in the script for -moz-, so do not confuse if you open the link in chrome or another.

0
source

More articles:


All Articles