翻译强力驱动i have an problem with a div box, which has to get a specific height: 241px. In all browser it is displayed right, but in chrome and safari it dis only 230px height
Is there a possiblility, per example with a css hack to modify this box only in webkit browsers?
It's possible to apply CSS rules only on webkit-based browsers by placing them in a media query referencing a webkit specific property:
@media screen and (-webkit-min-device-pixel-ratio:0) { /* webkit specific CSS */ div#mydiv { height:241px; } }I am curious if your problem stemmed from a box-sizing setting.
It could have been so I provide this answer for that reason, and because thirtydot pointed out the accepted answer doesn't help you understand why you have this problem.
For me, chrome would not display box-sizing: padding-box so I had to use border-box which mostly worked except that elements that are lined up next to it are not getting rendered the same if I depend on height. This is because the ultimate height in mozilla using a padding-box will be two pixels short of the element in chrome set to border-box.
The Solution there is to make the elements consistent. So I need to take my other element (the one I want to line up) and make it use border-box and padding-box respectively. I could try to tell it to have different heights depending on browser by using your answer, but I think that isn't the best idea.
-webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: border-box;