I have a site that I've inherited, and am going a bit insane with the CSS. There's a div that has a height of 185px - it shows in Computed Styles, and it's very obviously being applied to the divs with the same class. However, the height doesn't show up anywhere in the stylesheet, and it doesn't show up under Applied Styles or Inherited From in the element inspector. (See screenshot.) I need to get rid of the height, as it's causing some issues with truncating content (we don't want to use overflow:scroll because there are many of these divs on the page - one per database record - and that's an awful lot of scrollbars.)
The div class is search-result, and you can see in the right pane the height:185px attribute. Here's the code we actually have in our stylesheet for that class plus sub-elements:
#content .search-result {
margin-bottom: 1em;
border-bottom: 1px solid #ccc;
padding: 1em开发者_如何转开发 0;
}
#content .search-result .image-box {
float: right;
margin: 0 0 1.5em 30px;
font-size: .75em;
text-align: center;
}
#content .search-result .image-box img {
border: 1px solid #eee;
margin-bottom: .5em;
}
#content .search-result ul {
list-style: none;
margin: 0 0 1em;
}
I've also run grep on the entire site install, and the text "185px" doesn't exist anywhere on the server that I can find. Where else could this "ghost" style be getting set?
Looking at your CSS, it looks like 'em' units are being utilized, which looking at chrome's element inspector, it shows the unit as 'px', even when I explicitly list it as 'em'. Check around for height values declared in 'em' as well. Also I recommend using the "Styles" dropdown below computed styles to figure out which specific rules could be setting the height.
Off the top of my head, I'd say that, because "div.search-result" has no declared height, it's expanding to the height (plus any padding, margins, borders, etc.) of the "div.image-box" and anything else that is a descendent of "div.search-result".
Possible reasons:
- Height could have been set to the child elements. Check for them.
- Check if any other unit of measurement, like %, em have been used.
Checking the css values in computed styles won't help you. Check in the CSS tab
精彩评论