我正在尝试将对话置于屏幕中间。 我不知道对话的高度或宽度(新的元素可能稍后由JS添加)。对话的大小必须取决于它的内容。
我使用了transform:translate(-50%, - 50%);最高:50%;左:50%;它确实起到了作用,但在一些对话高度上也有副作用,在不同的浏览器上显示不同:
请帮助我否定这种副作用。
这种副作用可以在下面的例子中看到。通过向上或向下改变对话元素高度1px,效果消失。
<div class="dialogue" style="height:71px;">
<select>
<option>Option 1</option>
</select>
<div class="radio">
<label class="checked">Option 1</label><label>Option 2</label>
</div>
</div>
add([],_,_,_,[]).
add([H|T],E,P,C,[H,E|TR]) :-
P =:= C,
C1 is C+1,
P1 is P*2,
add(T,E,P1,C1,TR).
add([H|T],E,P,C,[H|TR]) :-
P =\= C,
C1 is C+1,
add(T,E,P,C1,TR).
答案 0 :(得分:0)
添加前缀时是否有效?
.dialogue {
padding: 10px;
border: 1px solid #000;
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
答案 1 :(得分:0)
这似乎是对话框的浮动宽度和高度的舍入问题。在奇数高度数字上不需要舍入 - 一切都很好。在偶数高度数字上,结果高度为x.5px,在不同的浏览器中似乎处理不同。
为了解决这个问题,决定使用MutationObserver功能与JS对话。 在加载时,当MutationObserver在HTML中发现更改时,JS会调用以下函数:
jQuery('.dialogue').css({
'left': Math.round((jQuery(window).width() - jQuery('.dialogue').width()) / 2) + 'px',
'top': Math.round((jQuery(window).height() - jQuery('.dialogue').height()) / 2) + 'px'
});