Css 最大高度Firefox/Opera/IE
我正在尝试设置图像的最大高度。它在Safari和Chrome中运行良好,但在Firefox/Opera/IE中不起作用。现在我读到html和身高应该设置为100%,当我使用JSFIDLE时,它确实有效。但是,它在我的页面(memo designs.com/portfolio.php)中不起作用 以下是该页面的来源:Css 最大高度Firefox/Opera/IE,css,Css,我正在尝试设置图像的最大高度。它在Safari和Chrome中运行良好,但在Firefox/Opera/IE中不起作用。现在我读到html和身高应该设置为100%,当我使用JSFIDLE时,它确实有效。但是,它在我的页面(memo designs.com/portfolio.php)中不起作用 以下是该页面的来源: <!DOCTYPE html> <html> <head> <title>memodesigns<
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel='stylesheet' href='style/stylesheet.css'>
<script type = 'text/javascript'>
function displayImage(image, link) {
document.getElementById('img').src = image;
document.getElementById('mylink').href = link;
}
function displayNextImage() {
if (x < images.length-1){
x++;
} else {
x = 0;
}
displayImage(images[x], links[x]);
}
function displayPreviousImage() {
if (x > 0){
x--;
} else {
x = images.length-1;
}
displayImage(images[x]);
}
function startTimer() {
setInterval(displayNextImage, -1);
}
var images = [], links = [], x = 0;images[0] = "http://memo-designs.com/items/doublek-01.png"
links[0] = "http://memo-designs.com/items/doublek-01.png"
images[1] = "http://memo-designs.com/items/memodesigns.png"
links[1] = "http://memo-designs.com/items/memodesigns.png"
</script>
</head>
<body style = 'background-color: #000000'><div id = 'menucontainer'>
<div id = 'menu'>
<p>
<ul>
<li><a class = 'menu' href = '/'>HOME</a></li>
<li><a class = 'menu' href = 'about.php'>ABOUT</a></li>
<li><a class = 'menu' href = 'portfolio.php'>PORTFOLIO</a></li>
<li><a class = 'menu' href = 'rates.php'>RATES</a></li>
<li><a class = 'menu' href = 'contact.php'>CONTACT</a></li>
</ul>
</p>
</div>
</div>
<div id = 'contentcontainer' style = 'padding-top: 0%; max-height: 100%; overflow: hidden; background-color: #000000'>
<p>
<img id= 'img' src = 'http://memo-designs.com/items/doublek-01.png' style = 'max-height: 100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;'>
<img class = 'arrow' onclick = 'displayPreviousImage()' id= 'img' src = 'style/graphics/larrow.png' style = 'position: absolute; left: 0; top: 40%;'>
<img class = 'arrow' onclick = 'displayNextImage()' id= 'img' src = 'style/graphics/rarrow.png' style = 'position: absolute; right: 0; top: 40%;'> </p>
</div>
</body>
</html>
如果您能帮我找出我做错了什么,我将不胜感激:)首先,我建议您开始使用like。它使浏览器更一致地呈现所有元素,并符合现代标准 您的HTML符号也可能导致浏览器之间的不一致。将类似
的内容转换为
。这也使得它更具可读性
内联样式属性使维护页面成为一件痛苦的事情,可能会覆盖您不想做的事情。它们还需要应用于每个元素,从而增加下载时间。使用class/id是一种方法。此外,伪元素不能与内联样式一起使用。我建议只在开发过程中使用它们进行快速更改。我使用Chrome/Firefox的element inspector快速、即时地更改内容,然后复制/粘贴编辑内容
因此,请确保将所有css放入样式表中。它还被认为是提高页面下载速度(用于生产的文件)的最佳实践
您以前肯定听说过jQuery。尝试使用它。jQuery使开发图像滑块之类的东西变得轻而易举(一旦您理解了语法,但这是一个低学习曲线)。此外,还有很多
另一个“良好实践”是将Java脚本放在文档的末尾,刚好在
标记之前。阅读更多关于此和
好的,足够的提示。让我们把手弄脏:
HTML部分:
好的,试试这些建议和代码示例。告诉我们是否有帮助,以及是什么帮助了我们
祝你好运,快乐编码尝试将
更改为
,看看是否有帮助。消息:无法设置未定义或空引用行的属性“href”:9删除了该行,问题仍然存在:/在atm上写入。耐心点:)好的,答案贴出来了。另一个可能对你有用的资源:嗯,今晚晚些时候我会试试。这个网站有点紧急。我从零开始重新启动了公文包,并使它在所有浏览器上都能正常工作。我所做的就是为这个页面使用一个新的css样式表。我知道这不是最好的,但正如我说的,我很着急。非常感谢,我会试试的!
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
min-width: 100%;
height: 100%;
min-height: 100%;
}
body{
margin: 0px;
background-color: #f3f4f4;
min-width: 100%;
height: 100%;
min-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>memodesigns</title>
<link rel="stylesheet" href="/assets/css/normalize.css">
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<div id="menuContainer">
<div id="menu">
<p>
<ul>
<!-- Instead of writing in CAPITALS use the text-transform:uppercase; css property -->
<li><a class="menu" href="/">Home</a></li>
<li><a class="menu" href="about.php">About</a></li>
<li><a class="menu" href="portfolio.php">Portfolio</a></li>
<li><a class="menu" href="rates.php">Rates</a></li>
<li><a class="menu" href="contact.php">Contact</a></li>
</ul>
</p>
</div>
</div>
<div id="contentContainer">
<p>
<!-- NOTE: Use IDs only once, else use classes to share css styles -->
<img id="img" src="http://memo-designs.com/items/doublek-01.png">
<img class="arrow left" src="style/graphics/larrow.png" onclick="displayPreviousImage()">
<img class="arrow right" src="style/graphics/rarrow.png" onclick="displayNextImage()">
</p>
</div>
<!-- Put the JavaScript at the end of the document just before the closing body tag -->
<script>
var images = [], links = [], x = 0,
baseUrl = "http://memo-designs.com/items/";
images[0] = baseUrl + "doublek-01.png";
links[0] = baseUrl + "doublek-01.png";
images[1] = baseUrl + "memodesigns.png";
links[1] = baseUrl + "memodesigns.png";
function displayImage(img, link)
{
document.getElementById('img').src = img;
document.getElementById('mylink').href = link;
}
function displayNextImage()
{
if (x < images.length-1) x++;
else x = 0;
displayImage(images[x], links[x]);
}
function displayPreviousImage()
{
if (x > 0) x--;
else x = images.length-1;
displayImage(images[x]);
}
function startTimer()
{
setInterval(displayNextImage, -1);
}
</script>
</body>
</html>
/* Assuming you'll use a CSS-Reset */
body {
background-color: #f3f4f4;
font:
...
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#menuContainer { ... }
#menu { ... }
#menu ul { ... }
/* Making the menu labels all UPPERCASE */
#menu ul > li {
text-transform: uppercase;
}
#contentContainer {
background-color: #000;
padding-top: 0;
overflow: hidden;
/* IMPORTANT: Set a fixed pixel height here to make the images use up the given space */
height: 200px; /* change 200 to your needs */
}
#img {
display: block;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#contentContainer .arrow {
position: absolute;
top: 40%;
}
#contentContainer .arrow.left {
left: 0;
}
#contentContainer .arrow.right {
right: 0;
}