为什么我的容器属性被覆盖？ （Nivo Slider，CSS）

Question

我第一次在项目中使用Nivo Slider。我保存图像的容器有一个填充和背景以适应设计，如下所示：

#slider { 
 background: #fff; 
 border: 1px solid #c1c1c1; 
 padding: 10px; 
 margin-bottom: 25px; 
 clear: left; 
}

在添加Nivo代码之前，一切都正常显示。现在我丢失了背景和填充。这是滑块代码：

/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px; 
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}

我很确定它与绝对定位和边距有关，但我花了一些时间调整它，我不确定如何解决这个问题。我需要滑块图像具有完整功能并恢复为具有白色背景的填充。

有什么想法吗？

提前致谢。

Answer 1

你可以制作一个包含“#slider”的“容器div”，并​​给“#slider”一个边距：10px。 这将创建相同的填充效果，对于背景，您可以将其添加到“container div”的CSS中。结帐我的尝试：http://meherranjan.com/nivo

Answer 2

我有一个nivo滑块的副本，所以我试了一下。似乎你的“#slider”的CSS放在了nivo-slider的CSS之前。你只需要在NivoSlider的CSS之后把你的CSS用于“#slider”，我认为它应该适合你。

Answer 3

我为我的网站找到了一个解决方案，我给了#slider一个533px的高度，它被我在主题文件中找不到的元素样式覆盖了。所以我只需将nivo-slider.css中的高度设置为“height: 533px !important;”，!important使其覆盖元素样式。不是我理想的修复，但我厌倦了把头撞在墙上。希望它可以帮助任何人。