初学者对跨浏览器CSS感到困惑 [英] Beginners woes with cross-browser CSS
问题描述
我正在着手构建一个大型Web应用程序。我想要抓住这个机会学习如何使用CSS并摆脱我的特殊方法进行HTML编码（即：添加表格，直到
结果还可以，或者我决定重新开始）。
然而我似乎无法做到正确。实验是
开始让我出门...
我正在寻找左侧有页眉，页脚，菜单的布局，
右边的匹配栏和中心的内容。内容
将主要是表格，所以我想我会用自己的页眉和页脚构建中心
窗格和（可能）滚动
主要内容。我希望布局模仿一个GUI窗口在
本身，所以它不需要滚动浏览器窗口。
如果需要滚动它应该只滚动中心
窗格。
我读到的内容让我相信这应该可以使用CSS。
我甚至设法破坏了一些东西所以它适用于
Firefox和Opera。 Internet Explorer似乎是一个完全不同的动物。
我上传了一个显示Firefox渲染截图的页面
我的代码 - 这是我想要实现的 - 和互联网
资源管理器搞砸了。加上我可怜的尝试的链接。
http：/ /www.marian-aldenhoevel.de/css/
请忽略那些花哨的颜色，他们挑选的锤子将
结构放入我的大脑:-)。
我的问题特别是：
- IE似乎不符合我放置的尺寸限制栏左侧和右侧< DIV> s上的
？我做错了还是
IE坏了吗？
- 我该怎样做才能使Page-Header居中（文本页面标题？ ）
绿色顶部栏水平_和_垂直，而
同时固定徽标在左上角？
指向网上任何推荐阅读的指针也是
赞赏。
Ciao，MM
-
Marian Aldenh？vel，Rosenhain 23,53123波恩。
Fon +49 228 624013，传真+49 228 624031.
http://www.marian-aldenhoevel.de
专门针对昆虫 Lazarus Long
Hi,
I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).
However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...
I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.
What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.
I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.
http://www.marian-aldenhoevel.de/css/
Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
My problems in particular are:
- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?
- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?
Pointers to any recommended reading on the web are also
appreciated.
Ciao, MM
--
Marian Aldenh?vel, Rosenhain 23, 53123 Bonn.
Fon +49 228 624013, Fax +49 228 624031.
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long
推荐答案
Marian Aldenh？vel写道：
Marian Aldenh?vel wrote:
我正在着手构建一个大型Web应用程序。我想抓住这个机会学习如何使用CSS并摆脱我对HTML编码的临时方法（即：添加表格直到
结果还可以，或者我决定重新开始。
然而，我似乎无法做到正确。实验开始让我疲惫不堪......
我正在寻找一个带有页眉，页脚，左侧菜单的布局，
右侧的匹配栏和内容中心。内容
将主要是表格式的，所以我想我会用自己的页眉和页脚构建中心窗格，并（可能）滚动主要内容。我希望布局模仿GUI窗口本身，所以它不需要滚动浏览器窗口。
如果需要滚动它应该只滚动中心窗格。
我读到的内容让我相信这应该可以使用CSS。
我甚至设法破坏了一些东西，以便它与Firefox和Opera一起使用。 Internet Explorer似乎是一个完全不同的动物。
看起来它可以在Firefox中运行，但请考虑一下：
你有左栏'剪裁''。这意味着任何可能高于用户窗口的
都不会是b
。如果你没有剪切，即可见，那么
将会发生在IE中已经发生的情况：让你的
窗口小到足以让右边的滚动条，然后
滚动：页脚会弹出滚动条，制作一个
丑陋的页面。
最近有一个帖子关于窗口底部的页脚而不是页面。我建议你在决定坚持这个布局之前阅读那个
线程你是否需要工作。
http://www.google.com/gr************...ing.google.com
然后，这里有一个链接，关于如何在_page _的底部获得一个带有
a页脚的3列布局：
http://www.pixy.cz/blogg / clanky / css-3col-layout /
还：
http://www.positioniseverything.net/piefecta-rigid.html
我上传了一个显示Firefox渲染截图的页面/>我的代码 - 这就是我想要实现的目标 - 以及互联网
Explorer搞砸了它。加上我可怜的尝试的链接。
http：/ /www.marian-aldenhoevel.de/css/
请忽略那些花哨的颜色，他们挑选的锤子结构进入我的大脑:-)。
它现在也在我脑海里;-)
特别是我的问题是：
- IE不是似乎遵守了我在左栏和右栏< DIV> s上放置的尺寸限制？我做错了还是IE被打破了？
IE确实存在四角绝对定位的问题。
- 我可以做什么来使页面页眉居中（文本页面标题 ;）
在绿色顶部栏中水平_和_垂直，同时在
同时将徽标固定在左上角？
img {float：left;}
＃page-header {text-align：center; line-height：3.7em;}
我把3.7em放在那里，虽然它应该是div的高度
但是你应该考虑一下人们扩大
字体和行-height _and_ div应相应调整
。
对网上任何推荐读物的指示也很受欢迎。
Hi,
I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).
However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...
I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.
What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.
It looks like it works in Firefox, but consider this:
you have the left bar ''clipped''. This means that anything
there which might be higher than the user''s window won''t be
accessible. If you make it not clipped, i.e. visible, the
same will happen as is happening already in IE: Make your
window small enough to get a scrollbar on the right, then
scroll: the footer will go up with the scrollbar, making one
ugly page.
There recently was a thread about footers at the bottom of
the window instead of the page. I suggest you read that
thread before you decide to stick with this layout you''re
working on.
http://www.google.com/gr************...ing.google.com
Then, here''s a link about how to get a 3 column layout with
a footer at the bottom of the _page_:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
also:
http://www.positioniseverything.net/piefecta-rigid.html
I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.
http://www.marian-aldenhoevel.de/css/
Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
It''s in my brain now too ;-)
My problems in particular are:
- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?
IE does have a problem with four corners absolute positioning.
- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?
img{float:left;}
#page-header{text-align:center;line-height:3.7em;}
I put 3.7em there, while it should really be the height of
the div, but you should think about people enlarging the
font, and the line-height _and_ the div should resize
accordingly.
Pointers to any recommended reading on the web are also
appreciated.
选择太多;-)
http：/ /locusmeus.com/list.html
-
Els
http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
Too much to choose from ;-)
http://locusmeus.com/list.html
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
Marian Aldenh？vel写道：
Marian Aldenh?vel wrote:
我正在着手构建一个大型Web应用程序。我想抓住这个机会学习如何使用CSS并摆脱我对HTML编码的临时方法（即：添加表格直到
结果还可以，或者我决定重新开始。
然而，我似乎无法做到正确。实验开始让我疲惫不堪......
我正在寻找一个带有页眉，页脚，左侧菜单的布局，
右侧的匹配栏和内容中心。内容
将主要是表格式的，所以我想我会用自己的页眉和页脚构建中心窗格，并（可能）滚动主要内容。我希望布局模仿GUI窗口本身，所以它不需要滚动浏览器窗口。
如果需要滚动它应该只滚动中心窗格。
我读到的内容让我相信这应该可以使用CSS。
我甚至设法破坏了一些东西，以便它与Firefox和Opera一起使用。 Internet Explorer似乎是一个完全不同的动物。
看起来它可以在Firefox中运行，但请考虑一下：
你有左栏'剪裁''。这意味着任何可能高于用户窗口的
都不会是b
。如果你没有剪切，即可见，那么
将会发生在IE中已经发生的情况：让你的
窗口小到足以让右边的滚动条，然后
滚动：页脚会弹出滚动条，制作一个
丑陋的页面。
最近有一个帖子关于窗口底部的页脚而不是页面。我建议你在决定坚持这个布局之前阅读那个
线程你是否需要工作。
http://www.google.com/gr************...ing.google.com
然后，这里有一个链接，关于如何在_page _的底部获得一个带有
a页脚的3列布局：
http://www.pixy.cz/blogg / clanky / css-3col-layout /
还：
http://www.positioniseverything.net/piefecta-rigid.html
我上传了一个显示Firefox渲染截图的页面/>我的代码 - 这就是我想要实现的目标 - 以及互联网
Explorer搞砸了它。加上我可怜的尝试的链接。
http：/ /www.marian-aldenhoevel.de/css/
请忽略那些花哨的颜色，他们挑选的锤子结构进入我的大脑:-)。
它现在也在我脑海里;-)
特别是我的问题是：
- IE不是似乎遵守了我在左栏和右栏< DIV> s上放置的尺寸限制？我做错了还是IE被打破了？
IE确实存在四角绝对定位的问题。
- 我可以做什么来使页面页眉居中（文本页面标题 ;）
在绿色顶部栏中水平_和_垂直，同时在
同时将徽标固定在左上角？
img {float：left;}
＃page-header {text-align：center; line-height：3.7em;}
我把3.7em放在那里，虽然它应该是div的高度
但是你应该考虑一下人们扩大
字体和行-height _and_ div应相应调整
。
对网上任何推荐读物的指示也很受欢迎。
Hi,
I am in the process of embarking on building a large web application. I
wanted to seize that opportunity to learn how to use CSS and get rid of
my ad-hoc approach to HTML-coding (i.e.: add tables until either the
result is OK or I decide to start over).
However I do not seem to be able to get it right. Experimentation is
beginning to wear me out...
I am going after a layout with header, footer, menu on the left,
matching bar on the right and content in the center. The content
will be mostly tabular so I thought I would structure the center
pane with its own header and footer and (possible) scrolling
main content. I want to have the layout mimic a GUI-Window in
itself so it should not require scrolling the browser-window.
Should scrolling be necessary it should only scroll the center
pane.
What I read makes me believe this should be possible using CSS.
I even managed to clobber something together so that it works with
Firefox and Opera. Internet Explorer seems to be a totally
different animal.
It looks like it works in Firefox, but consider this:
you have the left bar ''clipped''. This means that anything
there which might be higher than the user''s window won''t be
accessible. If you make it not clipped, i.e. visible, the
same will happen as is happening already in IE: Make your
window small enough to get a scrollbar on the right, then
scroll: the footer will go up with the scrollbar, making one
ugly page.
There recently was a thread about footers at the bottom of
the window instead of the page. I suggest you read that
thread before you decide to stick with this layout you''re
working on.
http://www.google.com/gr************...ing.google.com
Then, here''s a link about how to get a 3 column layout with
a footer at the bottom of the _page_:
http://www.pixy.cz/blogg/clanky/css-3col-layout/
also:
http://www.positioniseverything.net/piefecta-rigid.html
I have uploaded a page that shows a screenshot of Firefox rendering
my code - which is very much what I want to achieve - and Internet
Explorer messing it up. Plus a link to my pathetic attempt.
http://www.marian-aldenhoevel.de/css/
Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
It''s in my brain now too ;-)
My problems in particular are:
- IE does not seem to honour the size-constraints I placed
on the bar-left and bar-right <DIV>s? Did I do it wrong or
is IE broken?
IE does have a problem with four corners absolute positioning.
- What can I do to center the Page-Header (the text "page-header")
in the green top bar horizontally _and_ vertically, while at
the same time fixing the logo in the top left corner?
img{float:left;}
#page-header{text-align:center;line-height:3.7em;}
I put 3.7em there, while it should really be the height of
the div, but you should think about people enlarging the
font, and the line-height _and_ the div should resize
accordingly.
Pointers to any recommended reading on the web are also
appreciated.
选择太多;-)
http：/ /locusmeus.com/list.html
-
Els
http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
Too much to choose from ;-)
http://locusmeus.com/list.html
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
看起来它在Firefox中有效，但考虑一下：
你有左栏'剪裁''。这意味着那些
可能高于用户窗口的任何东西都无法访问。
这在我的情况下是可以接受的，因为左边的酒吧将托管最多少数项目的
菜单。 预期用途是运行
浏览器窗口最大化所以我不认为这将是一个问题的多少b $ b。如果结果是这样，我总是可以在菜单中添加
可选的滚动条，不是吗？
我正在构建目标的应用程序
特许经营合作伙伴的受控观众，所以我可以做一些假设。但要学习
正确的东西，我宁愿不要。
如果你没有剪裁，即可见，那就会发生同样的事情
正在发生已经在IE中：让你的窗口小到足以在右边获得一个
滚动条，然后滚动：页脚会弹出
滚动条，制作一个丑陋的页面。
啊，我明白你的意思了。
我当时正在努力解决的IE主要问题是
但是
不是浏览器窗口上的滚动条。事实上
主要内容根本不显示，而
左右的条形图并未延伸到
的全部高度。
窗口。
It looks like it works in Firefox, but consider this:
you have the left bar ''clipped''. This means that anything there which
might be higher than the user''s window won''t be accessible.
That would be acceptable in my case as the left bar will host a
menu of at most a handful of items. "Intended usage" is to run
the browser window maximized so I don''t think that would be much
of a problem. Should it turn out to be, I could always add
an optional scrollbar to the menu, couldn''t I?
The application I am building targets a controlled audience of
franchise partners, so I can make some assumptions. But to learn
the stuff properly I''d rather not.
If you make it not clipped, i.e. visible, the same will happen as is
happening already in IE: Make your window small enough to get a
scrollbar on the right, then scroll: the footer will go up with the
scrollbar, making one ugly page.
Ah, I see what you mean.
The main problem on IE that I am struggling with at the time is
not the scrollbar on the browser-window, though. It is the fact
that the main content does not display at all while the bars on
the left and right do not extend to the full height of the
window.
请忽略花哨的颜色，他们挑选的锤子结构进入我的大脑:-)。
Please ignore the garish colors, they where picked to hammer the
structure into my brain :-).
现在也在我脑海里; - ）
It''s in my brain now too ;-)
他们褪色，相信我。
＃page-header {text-align：center; line-height：3.7em;}
They fade, trust me.
#page-header{text-align:center;line-height:3.7em;}
啊。行高。从来没有想过这个。
Ah. line-height. Never thought of that.
对网上任何推荐阅读的指示也表示赞赏。
Pointers to any recommended reading on the web are also
appreciated.
太多可供选择;-)
http://locusmeus.com /list.html
除了这里有一堆枯死的树木，这还会让我好几个星期的忙碌
。非常感谢。
Ciao，MM
-
Marian Aldenh？vel，Rosenhain 23,53123 Bonn。
Fon +49 228 624013，传真+49 228 624031.
http://www.marian-aldenhoevel.de
专门针对昆虫 Lazarus Long
In addition to the pile of dead trees here this will keep me
busy for a few weeks. Thank you very much.
Ciao, MM
--
Marian Aldenh?vel, Rosenhain 23, 53123 Bonn.
Fon +49 228 624013, Fax +49 228 624031.
http://www.marian-aldenhoevel.de
"specialization is for insects" Lazarus Long
这篇关于初学者对跨浏览器CSS感到困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
