New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ie7下position:absolute,font-size:italic的元素宽度解析错误 #4

Open

sixwinds opened this issue Aug 20, 2015 · 0 comments

Labels

css

Owner

sixwinds commented Aug 20, 2015

ie7下position:absolute,font-size:italic的元素宽度解析错误

今天在360浏览器的兼容模式下碰到个奇葩的问题，body的宽度好好的，html这个根元素的宽度楞是比浏览器宽度大出好多，导致产生了横向滚动条。我看了下360的兼容模式用的是ie7的文档模式，所以我试着按症状google，百度了好久，终于找到了问题的原因：

原来是我html中某个绝对定位的元素的字体设置成了斜体，而ie下这种元素的宽度并不是想象中的自包裹，而是会很宽（具体的宽度是按什么来没有查到，估计是按浏览器宽度100%来解析的）

来看下代码（可以放到ie7上看下font-style是italic和normal的区别）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    p {
        position: absolute;
        top: 0;
        right: 2px;
        font-style: italic;
    }
    </style>
</head>
<body>
<p>sadfsadfsalkjsdfs</p>
</body>
</html>

解决方案有：

设置元素的overflow: auto
给元素指定宽度width: xxx

传说中的zoom: 1并没起到作用-_-||

参考：
https://muffinresearch.co.uk/bug-ie7-absolutely-positioned-italics/

The text was updated successfully, but these errors were encountered:

sixwinds added the css label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment