具有 Quirks 和 Standards 模式的可重复使用的 Asp.net 服务器控件

发布于 2024-07-14 07:07:48 字数 1357 浏览 4 评论 0原文

我正在开发一个可重用的 ASP.net 服务器控件，需要在 IE 6+、FF 2+ 和 Safari 的怪异和标准模式下工作。

该控件将公开两个用户可定义的属性高度和宽度，这两个属性都可以定义为百分比或像素值。

在控件内部，我有两列 Div，其中包含导航栏和控件内容。当内容大于容器时，列需要是 Div 才能使用溢出样式。请参阅下面的示例原型代码；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <title></title>
    </head>
    <body>
        <div style="height: 100%; width:400px; background-color: Green; ">
            <div style="height: 100%; width: 25%; background-color: Red; float:left; overflow:auto;">
                LongString:<br />Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
            </div>
            <div style="height: 100%; width: 75%; background-color: Pink; float:right;">
                Stuff
                <br />
                More stuff
                <br />
                And some more
            </div>
            <div style="clear:both;"></div>
        </div>
    </body>
</html>

我遇到的问题是，在标准模式下，当使用百分比基本高度时，div 按预期仅呈现与其内容一样大的大小。看来解决这个问题的唯一方法就是使用 JavaScript。

这会产生问题，因为控件可以使用 AJAX 异步重新渲染，并且高度不同步。

我想要实现的目标是不可能实现的还是我找错了地方？

原文

I'm developing a reusable ASP.net server control that needs to work in IE 6+, FF 2+ and Safari both Quirks and Standards mode.

The control will expose two user definable properties height and width both of these attributes can be defined as either a percentage or as a pixel value.

Inside the control I have two column Div's that contain a navigation bar and the controls contents. The columns need to be a Div to make use of the overflow style when the content is bigger than the container. See example prototype code below;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
        <title></title>
    </head>
    <body>
        <div style="height: 100%; width:400px; background-color: Green; ">
            <div style="height: 100%; width: 25%; background-color: Red; float:left; overflow:auto;">
                LongString:<br />Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
            </div>
            <div style="height: 100%; width: 75%; background-color: Pink; float:right;">
                Stuff
                <br />
                More stuff
                <br />
                And some more
            </div>
            <div style="clear:both;"></div>
        </div>
    </body>
</html>

The issue I run into is that in standards mode when using percent base height, the divs as expected only render as big as their content. It appears that the only way to resolve this issue is to use JavaScript.

This then creates issues in that the control can re-render asynchronously using AJAX and the heights get out of sync.

Is what I am trying to achieve impossible or am I looking in the wrong place?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

习ぎ惯性依靠 2024-07-21 07:07:48

<div style="height: 100%

100% 什么？ div 不是绝对定位的，所以答案是它的父级。父母是身体。

身材有多高？未指定任何内容：默认为 auto。 auto 表示 body 的高度是根据其内容的高度计算的。 Quirks 模式中的错误是 body 具有与视口匹配的最小高度。

将 html 和 body 都设置为 height: 100% 以在标准模式下真正获得 100%。

<div style="height: 100%

100% of what? The div isn't absolutely-positioned, so the answer is its parent. Parent is body.

How high is body? Nothing specified: defaults to auto. auto means the height of body is calculated from the height of its contents. The bug in Quirks Mode is that body has a minimum height matching the viewport.

Set both html and body to height: 100% to really get 100% in Standards Mode.

回复收藏 0 原文

初见 2024-07-21 07:07:48

我不想这么说，但有时当不得不使用旧浏览器时，使用老式技术有时可以更快地完成工作。尝试<表> 标签。 :(

<table style="height: 100%; width:400px; background-color: Green; ">
    <tr>
        <td style="height: 100%; width: 25%; background-color: Red; overflow:auto;">
            LongString:<br />
            Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
        </td>
        <td style="height: 100%; width: 75%; background-color: Pink; ">
            Stuff
            <br />
            More stuff
            <br />
            And some more
        </td>
    </tr>
</table>

I hate to say it, but sometimes when having to work with old browsers, using old-school techniques gets the job done faster sometimes. Try <table> tags. :(

<table style="height: 100%; width:400px; background-color: Green; ">
    <tr>
        <td style="height: 100%; width: 25%; background-color: Red; overflow:auto;">
            LongString:<br />
            Stuffsdfsfdsdfsfsdfdfsdfsdfsdfsdfsdxgsdfgsdfgsdgiusdfgiudfgifdgu
        </td>
        <td style="height: 100%; width: 75%; background-color: Pink; ">
            Stuff
            <br />
            More stuff
            <br />
            And some more
        </td>
    </tr>
</table>

回复收藏 0 原文

~没有更多了~