- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在处理 IE 11 在 Windows 8 和 Windows 8.1 上的奇怪行为。我正在固定定位元素内的元素位置。而且它变得很奇怪。当我用开发工具检查它时它在正确的位置,但在视觉上它完全在不同的地方。我发现如果我暂时禁用父元素的位置规则然后再次启用它,子元素之后会正确呈现。 Win 7 上的 IE 11 没有这个问题。
HTML:
<body style="" class="modal-open">
<div class="container">
<div id="bg-overlay" class="row">
<div class="col-lg-12 col-md-12">
<div id="photo-modal" class="modal fade in" style="display: block;" role="dialog" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"><img src="d4wbqxn.jpg" width="1100" height="600" class="img-responsive" style="margin: 0 auto;"></div>
<div class="modal-footer" style="padding-bottom: 104px;">
<div id="comments" class="clearfix"><div class="comment guest" style="">
<img src="avatar50x50.png" alt="Avatar" class="avatar img-circle">
<a href="#" class="user" data-id="5">Test1</a>
<div class="clearfix">
<div class="well well-sm">Cool</div>
</div>
<small>01/02/2014 20:01</small>
</div><div class="comment owner" style="">
<img src="50x50.jpg" alt="Avatar" class="avatar img-circle">
<a href="#" class="user" data-id="6">Owner</a>
<div class="clearfix">
<div class="well well-sm">Thanks</div>
</div>
<small>01/02/2014 20:09</small>
</div><div class="comment owner" style="">
<img src="50x50.jpg" alt="Avatar" class="avatar img-circle">
<a href="#" class="user" data-id="7">Owner</a>
<div class="clearfix">
<div class="well well-sm">Thanks</div>
</div>
<small>01/03/2014 11:38</small>
</div><div class="comment owner" style="">
<img src="50x50.jpg" alt="Avatar" class="avatar img-circle">
<a href="#" class="user" data-id="8">Owner</a>
<div class="clearfix">
<div class="well well-sm">Thanks</div>
</div>
<small>01/03/2014 12:13</small>
</div><div class="comment owner" style="">
<img src="50x50.jpg" alt="Avatar" class="avatar img-circle">
<a href="#" class="user" data-id="9">Owner</a>
<div class="clearfix">
<div class="well well-sm">Thanks</div>
</div>
<small>01/03/2014 12:14</small>
</div></div>
</div>
</div>
</div>
<form role="form" class="text-center" style="width: 1100px; left: 401.5px; margin-bottom: 0px; visibility: visible;">
<div class="form-group">
<textarea class="form-control" rows="3" style="height: 35px; overflow: hidden; word-wrap: break-word; resize: horizontal;" placeholder="Comment"></textarea>
</div>
<button type="button" class="btn btn-primary add">Add</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade in"></div></body>
CSS:
.btn {
font-weight: normal;
}
.btn-default {
border-color: #fff;
}
.btn-default:hover, .btn-default:focus {
background-color: #ecf9fe;
border-color: #ecf9fe;
}
.btn-danger {
background-color: #facc16;
border-color: #facc16;
color: #313131;
}
.btn-danger:hover, .btn-danger:focus {
background-color: #f0c105;
border-color: #dcb104;
color: #242424;
}
.modal-content {
background-color: #b1e6fb;
border: none;
}
.modal-header {
background-color: #c5ecfc;
border: 1px solid #c5ecfc;
border-bottom: none;
border-radius: 6px 6px 0 0;
}
.modal-title {
font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align: center;
}
.modal-footer {
text-align: center;
background-color: #9ee0fa;
border: 1px solid #9ee0fa;
border-top: none;
border-radius: 0 0 6px 6px;
}
.modal-footer .btn-primary {
color: #313131;
background-color: #51c7f6;
border-color: #51c7f6;
}
.modal-footer .btn-primary:hover, .modal-footer .btn-primary:focus {
color: #242424;
background-color: #3dc1f5;
border-color: #3dc1f5;
}
#error-message .modal-content {
background-color: #2ab9f3;
padding: 20px;
}
#error-message p {
margin: 0;
padding-right: 15px;
text-align: center;
color: #b1e6fb;
}
#move-photo-modal .modal-header {
background-color: #b1e6fb;
border: 1px solid #b1e6fb;
}
#move-photo-modal .album {
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
background: #1fa2f0;
cursor: pointer;
}
#move-photo-modal .album .text {
font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #b1e6fb;
}
#move-photo-modal .album:nth-child(2) {
background: #a6e1fa;
}
#move-photo-modal .album:nth-child(3) {
background: #9cdcf9;
}
#move-photo-modal .album:nth-child(4) {
background: #91d7f8;
}
#move-photo-modal .album:nth-child(5) {
background: #87d2f7;
}
#move-photo-modal .album:nth-child(6) {
background: #7ccdf7;
}
#move-photo-modal .album:nth-child(7) {
background: #72c8f6;
}
#move-photo-modal .album:nth-child(8) {
background: #68c4f5;
}
#move-photo-modal .album:nth-child(9) {
background: #5dbff4;
}
#move-photo-modal .album:nth-child(10) {
background: #53baf3;
}
#move-photo-modal .album:nth-child(11) {
background: #48b5f3;
}
#move-photo-modal .album:nth-child(12) {
background: #3eb0f2;
}
#move-photo-modal .album:nth-child(13) {
background: #33abf1;
}
#move-photo-modal .album:nth-child(14) {
background: #29a6f0;
}
#move-photo-modal .modal-footer {
margin-top: 0;
border: none;
cursor: auto;
}
.comment {
position: relative;
width: 80%;
}
.comment small {
display: block;
font-size: 80%;
}
.comment .user {
text-decoration: none;
color: #0d4ca6;
}
.comment .well {
margin-bottom: 0;
}
.comment .avatar {
position: absolute;
width: 50px;
height: 50px;
}
.comment.guest {
float: left;
text-align: left;
}
.comment.guest small {
margin-left: 10px;
}
.comment.guest .user {
margin-left: 55px;
}
.comment.guest .well {
border-color: #facc16;
margin-left: 10px;
padding-left: 45px;
float: left;
}
.comment.owner {
float: right;
text-align: right;
}
.comment.owner small {
margin-right: 10px;
}
.comment.owner .user {
margin-right: 55px;
}
.comment.owner .well {
border-color: #0d4ca6;
margin-right: 10px;
padding-right: 45px;
float: right;
}
.comment.owner .avatar {
right: 0;
}
#move-photo-modal .modal-header {
background-color: #b1e6fb;
border: 1px solid #b1e6fb;
}
#move-photo-modal .album {
font-size: 17px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
background: #1fa2f0;
cursor: pointer;
}
#move-photo-modal .album .text {
font-family: GardensC, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #b1e6fb;
}
#move-photo-modal .album:nth-child(2) {
background: #a6e1fa;
}
#move-photo-modal .album:nth-child(3) {
background: #9cdcf9;
}
#move-photo-modal .album:nth-child(4) {
background: #91d7f8;
}
#move-photo-modal .album:nth-child(5) {
background: #87d2f7;
}
#move-photo-modal .album:nth-child(6) {
background: #7ccdf7;
}
#move-photo-modal .album:nth-child(7) {
background: #72c8f6;
}
#move-photo-modal .album:nth-child(8) {
background: #68c4f5;
}
#move-photo-modal .album:nth-child(9) {
background: #5dbff4;
}
#move-photo-modal .album:nth-child(10) {
background: #53baf3;
}
#move-photo-modal .album:nth-child(11) {
background: #48b5f3;
}
#move-photo-modal .album:nth-child(12) {
background: #3eb0f2;
}
#move-photo-modal .album:nth-child(13) {
background: #33abf1;
}
#move-photo-modal .album:nth-child(14) {
background: #29a6f0;
}
#move-photo-modal .modal-footer {
margin-top: 0;
border: none;
cursor: auto;
}
#photo-modal form {
background-color: #9ee0fa;
border: 1px solid #9ee0fa;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 0 20px 20px;
position: fixed;
bottom: 0;
visibility: hidden;
z-index: 1060;
}
#photo-modal .modal-header {
min-height: 45px;
}
#photo-modal .modal-header .close {
margin-top: -8px;
font-size: 31px;
}
#photo-modal .modal-body p {
margin: 10px 0 0;
text-align: center;
}
@media (min-width: 768px) {
#photo-modal .modal-dialog, #photo-modal form {
width: auto;
max-width: 1100px;
}
}
.form-control:focus {
border-color: #2ab9f3;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(42, 185, 243, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(42, 185, 243, 0.6);
}
JS:
$.fn.ready(function () {
OnShown();
$('#photo-modal').scroll(OnScroll);
$(window).resize(OnScroll);
});
function OnShown() {
var $modal = $('#photo-modal');
$modal.find('.modal-footer').css('padding-bottom', $modal.find('form').height() + 20);
OnScroll();
}
function OnScroll() {
var $modal = $('#photo-modal');
var $dialog = $modal.find('.modal-dialog');
var $footer = $modal.find('.modal-footer');
var $form = $modal.find('form');
$form.width($dialog.width() - 42)
.css({
'left': $dialog.offset().left
});
var wHeight = $(window).height();
var elTop = $modal.offset().top;
var footerTop = $footer.offset().top;
var dialogMB = parseInt($dialog.css('margin-bottom'));
if ($modal.scrollTop() + wHeight >= $dialog.outerHeight(true) - dialogMB) {
$form.css('margin-bottom', dialogMB);
} else {
$form.css('margin-bottom', 0);
}
if (footerTop - elTop + $form.outerHeight(true) < wHeight) {
$form.css('visibility', 'visible');
} else {
$form.css('visibility', 'hidden');
}
}
我在这里创建了 fiddle :http://jsfiddle.net/SovietSam/TmmAV/
如果您很幸运没有看到问题,请尝试调整结果 Pane 的大小(在某些维度上有时它会正确呈现)。
最佳答案
如果您有背景颜色/图像,并且某个元素固定在其上,则必须移除该元素 的背面 以避免重绘问题。添加这些属性并删除可见性。
CSS:
#photo-modal form {
...
display: none;
backface-visibility: hidden;
}
JS:
if (footerTop - elTop + $form.outerHeight(true) < wHeight)
$form.css('display', 'block');
else
$form.css('display', 'none');
为什么显示而不是可见性,因为可见性只是隐藏上下文,这不会改变它与其他元素的交互。
关于css - Win 8, Win 8.1 + IE 11 固定定位错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21157842/
在项目属性窗口的应用程序选项卡和启动对象组合框中,我无法看到我的 win 表单以将其中一个设置为启动对象。 它出什么问题了? 最佳答案 开通 Program.cs启动项目的文件(在解决方案中选择为启动
我的问题是,当我得到正确的数字时,python 脚本结束,但不打印:你赢了! import random number = random.randint(1,100) # This part work
我使用 Eclipse 开发了一个 Java 应用程序。我使用的电脑操作系统是Win Vista。我在 Win XP 计算机上使用此应用程序时遇到问题。我发现的问题是: 如果在我的代码中我使用以下几行
显然,这将打印出石头/剪刀/布获胜或平局。 实现“石头胜剪刀——计算机胜!”这样的结果的最佳方式是什么?等等? var userChoice = prompt("Do you choose rock,
我正在开发一个使用HttpWebRequest将请求发送到另一台服务器的ASP.NET Web应用程序。它通过HTTPS发送请求,并且远程服务器需要客户端证书。该请求在.NET应用程序中失败,显然无法
我正在 WIn XP 上使用 VC6 开发应用程序。使用 GetKeyBoardLayoutList() 和 GetLocalInfo() API 从系统检索默认输入语言列表。 代码如下。 `UINT
我在 WPF 中创建了一个无边框窗口。我已经编写了一个事件来最大化窗口,但是在最大化时,部分窗口有时会隐藏在任务栏后面,片刻之后会出现在任务栏顶部。 如何确保窗口每次都保持在任务栏的顶部?以下是我实现
我开始制作 3d 游戏。然后我停了一段时间并安装了win7。现在我想继续研究它只是为了发现代码卡住了!在 XP 上,我将 View 渲染到窗体上。并且游戏循环和所有游戏形式都在同一个线程上运行! 这在
main() { int *p; free(p); } 此代码在 Win 2K 中崩溃。但不知何故不会在 Win Xp 中崩溃!知道为什么吗? 编辑:是的。这是一个错误,不应该被写入。更多
我在我的应用程序中使用 libeay32.dll/ssleay32.dll 库来支持 https。库在 Windows 7 上成功加载(不是通过我的应用程序,通过 Qt 库),但是我在 Windows
在源代码下方添加了新的详细信息。 有一个问题是 Delphi,其中 Internet 代码可在 Win 10 上运行,但不能在 Win 7 上运行。我正在尝试将一个小项目连接到 haveibeenpw
我在 Win 7 上为 Perfmon 创建了 xml 模板。我能够导入它并运行它 - 一切正常。现在,当我将此 xml 复制到 Win 2008 R2 计算机并尝试将其导入到 perfmon 中时,
我在使用标准数据驱动的 Winform 应用程序时遇到了一个有趣的问题。 该应用程序最初是在 Windows 7 和 Visual Studio 2010 上开发的。然后我用 Windows 8 和
我有一个在 Windows 7(64 位)上编写的程序,可以在我的计算机上正确编译和运行。 但在其他计算机上(特别是在 Windows 8(64 位)上)该程序无法运行。当我尝试运行它时,它说我的程序
将现有的基于 Vb6.0 win 的应用程序转换为基于 c# win 的应用程序的最快方法是什么? 最佳答案 核心语言如此不同,我不得不说从头开始,只复制复杂的代码位。如果您从头开始,您将不必处理所有
我正在处理 IE 11 在 Windows 8 和 Windows 8.1 上的奇怪行为。我正在固定定位元素内的元素位置。而且它变得很奇怪。当我用开发工具检查它时它在正确的位置,但在视觉上它完全在不同
将使用 Java x32 在 eclipse x32 上创建的项目导入到使用 java x64 的 eclipse x64 上有哪些挑战? 最佳答案 Java 是跨平台的,所以你应该不会有任何问题。
鉴于 l 是一个整数列表并且 win 是一个整数,下面的代码生成一个列表 lpadded: lpadded = win // 2 * [-1] + l + win // 2 * [-1] 在 lpad
我有一个适用于 Windows Phone 8.1 的应用程序及其 UWP 版本。我想在 Windows 中更改应用程序的背景时动态更改它。 用例是: 启动应用,背景主题为深色。 按下手机上的主页按钮
不完全确定我是否已经解决了这个问题,但这是我所看到的以及我认为正在发生的事情。 我有一个主要用 C 编写的 Win32 程序,它加载一个 C++ DLL。该 DLL 通过 COM 对象将数据从 C 程
我是一名优秀的程序员,十分优秀!