在opera / firefox中div宽度不正确 [英] div widths not correct in opera/firefox
问题描述
我正在尝试创建两行，每行100％。
第一行有三个dvis，第一行是20％宽，第二行是60％宽，第三行是20％宽。
第二行是相同的，除了第一个元素现在是两个元素，每个10％宽。
有点像：
----- x ---- --------- y1 --------- ----- z1 ---
x1 x2 --------- y2 --------- ----- z2 ---
我在operqa和mozilla得到的是：
xyz
x1 x2 yz
i我正在使用
div class = head
div class = row
div class = x width 20％
div class = y1 width 60％
div class = z1 width 20％
div class = head
div class = row
div class = x1宽度10％
div class = x2宽度10％
div class = y2 width 60％
div class = z2 width 10％
资源管理器使中间元素大小合适，但歌剧和mozilla不是。
但代码很简单。 />
[HTML]
< html>
< head& gt;
< link rel =" stylesheet"类型= QUOT;文本/ CSS" HREF =" davidpicturepages.css" />
< title> 08.HospitalAcrossTheStreetFromUs.JPG< / title>
< / head>
< ; body>
< div id =" row">
< div id =" backthumbs" class =" nav">
< A HREF =" WalkAroundTheNeighborhood.html" style =" text-decoration：none">
返回缩略图
< / a>
< / div>
< div id =" title">走过社区
< / div>
< div id =" backtohome"类= QUOT; NAV" >
< A HREF =" http：//asllearner.memebot.com" style =" text-decoration：none">
返回大卫的日本之家
< / A>
< ; / div>
< / div>
< div id =" row">
< div id =" prev"类= QUOT; NAV" >
< A HREF =" 07.LookingRightOutTheFrontGateupright.html">
prev
< / a>
< / div>
< div id =" next" class =" nav">
< A HREF =" 09.TheEndOfTheWorld.html" style =" text-decoration：none">
next
< / a>
< / div>
< div id =" ImageName">
08.HospitalAcrossTheStreetFromUs.JPG
< / div>
< div id =" LargeImage" class =" nav">
< a href =" ./ pics / 08.HospitalAcrossTheStreetFromUs.JPG" target =" new">
点击此处查看完整尺寸的图片
< / a>
< / div>
< / div>
< / div>
[/ HTML]
我的css如下
I am trying to create two rows, each 100% wide.
the first has three dvis, the first is 20% wide, the second is 60% wide, the third is 20% wide.
THe second row is the same except the first element is now two elements, each 10% wide.
sort of like so:
-----x---- ---------y1--------- -----z1---
x1 x2 ---------y2--------- -----z2---
what i am getting in operqa and mozilla is:
x y z
x1 x2 y z
i am using
div class= head
div class= row
div class= x width 20%
div class= y1 width 60%
div class= z1 width 20%
div class= head
div class= row
div class= x1 width 10%
div class= x2 width 10%
div class= y2 width 60%
div class= z2 width 10%
explorer makes the middle elements the right size, but opera and mozilla don''t.
But the code is simple enough.
[HTML]
<html>
<head>
<link rel="stylesheet" type="text/css" href="davidpicturepages.css" />
<title>08.HospitalAcrossTheStreetFromUs.JPG</title>
</head>
<body >
<div id="row">
<div id="backthumbs" class="nav">
<A HREF="WalkAroundTheNeighborhood.html" style="text-decoration:none">
Back to Thumbnails
</a>
</div>
<div id="title">A Walk Through The Neighborhood
</div>
<div id="backtohome" class="nav" >
<A HREF="http://asllearner.memebot.com" style="text-decoration:none">
Back to David''s Japan Home
</A>
</div>
</div>
<div id="row">
<div id="prev" class="nav" >
<A HREF="07.LookingRightOutTheFrontGateupright.html">
prev
</a>
</div>
<div id="next" class="nav">
<A HREF="09.TheEndOfTheWorld.html" style="text-decoration:none">
next
</a>
</div>
<div id="ImageName">
08.HospitalAcrossTheStreetFromUs.JPG
</div>
<div id="LargeImage" class="nav">
<a href="./pics/08.HospitalAcrossTheStreetFromUs.JPG" target="new">
Click here for a full size image
</a>
</div>
</div>
</div>
[/HTML]
my css is as follows
推荐答案
I怀疑你是在资源管理器中设计的，然后你检查过它们是否在mozillia等工作。
问题是你的HTML顶部没有DOCTYPE语句，例子会是
[html<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/html]
但是所有常见的都列在
http：//www.w3。 org / QA / 2002/04 / valid-dtd-list.html
使用HTML 4.01或XHTML 1.0。
问题是如果没有DOCTYPE，所有浏览器都在怪异模式下工作，而DOCTYPE则以标准模式工作。在标准模式下，浏览器以指定的标准运行在庄园中（错误没有站立）。
但是在怪癖模式下，浏览器有时会做一些不符合标准的事情。资源管理器对此特别不好，在怪癖模式下它有一个破损的盒子模型，就是它错误地解释了宽度，填充大小和边框大小。
添加一个DOCTYPE，你应该看到改进浏览器的工作方式后，您可能需要更改CSS以便正确显示。
一般而言，设计像素完美设计并不是一个好主意因为很难在所有浏览器上实现。设计100％设计也不是一个好主意，因为舍入误差可能导致设计达到> 100％，然后事情开始包装到你不会想到的新线上。设计到100％以下（即99％）更安全，以避免这些问题。
I suspect that you have designed in explorer and then you have checked to see if they work in mozillia etc.
The problem is that you have no DOCTYPE statement at the top of youR HTML, an example would be
[html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/html]
but all the common ones are listed at
http://www.w3.org/QA/2002/04/valid-dtd-list.html
use either an HTML 4.01 or XHTML 1.0 one.
The problem is that without a DOCTYPE all browsers work in quirks mode, with a DOCTYPE they work in standards mode. In standards mode the browser runs in a manor compilent with the specified standard (bugs not with standing).
However in quirks mode the browsers sometimes do some things that are not complient with the standards. Explorer is particularly bad for this and in quirks mode it has a broken box model, that is it interprets the width, padding size and border size incorrectly.
Add a DOCTYPE, you should see a change in the way explorer works, you may then need to change your CSS so that is displays correctly.
In general terms it is not a good idea to design to a pixel perfect design as it is hard to achieve on all browsers. It is also not a good idea to design to a 100% design because rounding errors can cause the design to go to >100% and then things start wrapping onto new lines that you don''t wont. It is safer to design to just under 100% (that would be 99%) to avoid these problems.
感谢您的回复。
我开始在歌剧中预览它，实际上，但是不能让它工作并切换到探险家。
但是......
我尝试了每一个doctype，但没有一个在文档的呈现方式上有任何不同。一切都在探险家工作得很好，在firefox中非常糟糕。我认为这个问题出在我的css或html中...我将60％改为40％，这也没有任何区别，所以这不是偏离边缘的问题，它只是没有注册宽度命令...但是我不明白为什么它不是：t。
感谢您的提示。我将确保从现在开始包含doctypes ....
Thanks for the reply.
I started out previewing it in opera, actually, but couldn:t get it to work and switched to explorer.
but...
I tried every single doctype and none of them made any difference in how the document was presented. All worked fine in explorer and terribly in firefox. I think the problem is in my css or html...i changed the 60% to 40%, and that made no difference either, so it is not a question of running off the side, it''s just not registering the width command...but I dont see why it isn:t.
thanks for the tips though.I will be sure to include doctypes from now on....
在这种情况下发布一个指向页面的链接（最好）或发布html和CSS代码，我们将看看是否能看到你错过的东西。
In that case post a link to the page (preferably) or post the html and CSS code and we''ll see if we can see something you missed.
这篇关于在opera / firefox中div宽度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
