我在ASP.NET MVC项目的默认Site.css文件中发现了这个(对我而言)好奇的CSS样式:
.text-box.multi-line
{
height: 6.5em;
}
是.text-box.multi-line碰巧在它的中间点,或这两个类的嵌套类的只是名字？或者它完全是另一回事？你可以解释吗？
你能提供一个用例吗？
编辑
感谢所有的答案.这似乎是w3schools css参考页面的遗漏.
更新1:
我发现当width:100%从div中删除时,如果它不包含任何内容,我得到的结果我想要它的高度为0的内容.但是,我需要div具有100%的宽度,这由于某种原因迫使它具有没有内容的高度.
这是问题的一个方面.如果您使用IE7进入以下链接,可能只能在IE6及更低版本上看到问题.
原始问题:
我有一个空的div,由于某种原因有一个高度.
在Chrome上,div除非包含内容,否则根本不显示.另一方面,IE7显示div,即使它没有内容.
所以基本上,如果它是空的,我希望它的高度为0px,如果它有内容,则自动调整它的高度.如果它的宽度不是100%,那么它的确如何表现.
当我在IE7中测试我的页面时,所有图像都有一个工具提示,对应于图像标签中的alt文本.
<img src="Myimage.jpg" alt="No pic" />
当我将鼠标悬停在IE7中显示的图片上时,我得到一个与alt文本对应的工具提示"No pic".如何修复此问题？
html css internet-explorer internet-explorer-7 internet-explorer-6
网站:http://www.animefushigi.com
使浏览器窗口变瘦,请注意没有水平滚动条,如果浏览器窗口的宽度超过1024 px,则应该有一个.
<div id="master_wrapper"><div id="outer_wrapper">
..
</div></div>
#master_wrapper {
overflow:hidden;
margin:0 auto;
}
#outer_wrapper {
overflow:hidden;
margin-top:87px
}
如果我有以下XML:
<Books>
<Book>
<Name>Test</Name>
...
</Book>
<Book>
<Name>Another one</Name>
...
</Book>
</Books>
如何使用jQuery 的名称值等于 "test" 的子元素选择Book元素？
为什么"测试"类不适用于<p>标签和<span>标签的使用？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Newsletter template</title>
<!--general stylesheet-->
<style type="text/css">
p { padding: 0; margin: 0; }
a {
color: #455670; text-decoration: underline;
}
test {
margin: 20; font-family: "Helvetica Neue"; font-size: 20px; font-weight: normal; color: #666666; line-height: 15px !important;
}
</style>
</head>
<body>
<p class="test"><span class="test"> Check the spelling of the words you typed.</span></p>
</body>
</html>
我想创建一个带圆角效果的链接.但是,圆角效果仅在悬停时显示.通过使用CSS3,它在mozilla,chrome和Safari上运行良好,但在IE中却没有.
在这里,我的CSS
a {
color: black; background-color:#ddd;
text-align: center;font-weight: bold;
width:110px; height:25px;
padding: 10px; text-decoration:none;
}
.abc:hover {
background-color: lightblue;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}
在这里我的HTML
<a href="#" class="abc">Button</a>
我有两个内联的div.它们都有相似的风格,重要的是它们都是内联的.
JQuery报告称他们的css"display"仅在chrome中被阻止.我真的需要知道这两个是内联的.
jsfiddle 在这里
CSS:
div
{
display: inline;
width: 50%;
float: left;
height: 100px;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
}
.div1
{
background-color: black;
color: white;
border: 2px solid grey;
}
.div2
{
background-color: white;
color: black;
border: 2px solid black;
}
HTML:
<div class="div1">1</div>
<div class="div2">2</div>
jQuery的:
jQuery("div").click(function()
{
jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});
jQuery("div").click();
有谁知道发生了什么,或者更重要的是我能做些什么？(除了拉我的头发......它开始受伤;))
HTML
<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','images/enterroll.gif',1)"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></a></div>
</div>
</body>
CSS
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
#enter {
height: 300px;
width: 300px;
}
所以我真正需要做的就是让div div位于包装器div的右下角.
为此,我需要它覆盖enterlogo div!我已经查找了许多关于z-index和定位方法的帖子,并且浮动权限正确,但所有这些帖子似乎都不尽如人意.
任何帮助都会受到赞赏,我打电话给朋友,他说将enterlogo div中的图像作为背景并将其他图像放入该div可能会有所帮助..我看不出它会如何工作!
PS翻转图像将成为一个链接,这将是页面上唯一的div片段.
我发现了关于水平和垂直居中图像的问题.但它没有用.我的代码是
#parent {
position : relative;
float : left;
width : 700px;
height : 400px;
overflow : hidden;
background-color: black;
}
#parent img {
max-height :400px;
max-width : 700px;
}
图像的高度和宽度是动态的.
css ×9
html ×7
javascript ×3
jquery ×2
css3 ×1
image ×1
positioning ×1
scrollbar ×1
xhtml ×1
xml ×1