使用条件注释很容易使用特定于浏览器的CSS规则来定位Internet Explorer:
<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->
Run Code Online (Sandbox Code Playgroud)
有时,Gecko引擎(Firefox)行为不端.使用CSS规则而不是单个其他浏览器仅针对Firefox的最佳方法是什么?也就是说,Internet Explorer不仅应该忽略Firefox规则,还应该忽略WebKit和Opera.
注意:我正在寻找一个"干净"的解决方案.在我看来,使用JavaScript浏览器嗅探器向我的HTML添加"firefox"类并不符合要求.我宁愿看到一些取决于浏览器功能的东西,就像条件评论只对IE有"特殊"...
如何定义CSS滚动条样式跨浏览器?我测试了这段代码,它只适用于IE和Opera,但在Chrome,Safari和Firefox中失败了.
<style type="text/css">
<!--
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
Run Code Online (Sandbox Code Playgroud) 我希望在从页面顶部向下滚动800px后显示隐藏的div.到目前为止我有这个例子,但我想它需要修改才能实现我想要的东西.
编辑:
[当scrollUp和高度小于800px时,这个div应隐藏]
HTML:
<div class="bottomMenu">
<!-- content -->
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
Run Code Online (Sandbox Code Playgroud)
jQuery的:
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Run Code Online (Sandbox Code Playgroud)
这是我当前代码的小提琴.
对于我在我工作的公司开发的应用程序,我们需要一个支持在基于JS的Web应用程序中插入表情符号的输入.我们目前正在使用带有表情符号短代码(即':-)')的输入,并希望切换到插入实际的图形图像.
我们最初的计划是使用contenteditable <div>.我们正在使用监听器来执行粘贴事件以及不同的键/鼠标交互,以确保没有不需要的标记进入contenteditable(我们从其容器标签中删除文本并仅留下我们自己插入的图像标签).
但是,现在的问题是如果你输入足够的内容(即它的高度增加),div会调整大小.我们不希望这种情况发生,文本只是被隐藏(即普通overflow: hidden)也是不可接受的.所以:
有没有办法让contenteditable div表现得像单行输入?
我最喜欢,如果有一个相对简单的属性/ css属性,我错过了将做我想要的,但如果有必要CSS + JS建议也将不胜感激.
我想隐藏我的div元素和我的整个滚动条body,但仍然让用户使用鼠标滚轮或箭头键滚动.如何使用原始JavaScript或jQuery实现这一目标?有任何想法吗?
如果我打开一个模态对话框,通过Twitter Bootstrap,我注意到它将页面的所有html内容(即,在container)中向左推了一点,然后在关闭之后将其恢复正常.但是,这仅在浏览器宽度足够大而不能在"移动"(即最小)媒体查询上时才会发生.最新版本的FF和Chrome(未测试其他浏览器)会出现这种情况.
你可以在这里看到问题:http://jsfiddle.net/jxX6A/2/
注意:您必须增加"结果"窗口的宽度,以便切换到"med"或"large"媒体查询css.
我根据Bootstrap网站上显示的示例设置了页面的HTML:
<div class='container'>
<div class='page-header'>
<h4>My Heading</h4>
</div>
<div id='content'>
This is some content.
</div>
<div class='footer'>
<p>© 2013, me</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我猜这不应该发生,但我不确定我做错了什么.
编辑:这是一个已知的错误,有关更多(和最新)的信息,请参阅:https://github.com/twbs/bootstrap/issues/9855
我有一个div像这样的元素样式:
<div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>
Run Code Online (Sandbox Code Playgroud)
当它变得高于300px时,我需要允许沿y轴滚动,这很好.但我需要设置"visiblity = false"滚动条本身.
我试着使用这个元素样式:
overflow-y: hidden;
Run Code Online (Sandbox Code Playgroud)
虽然它隐藏了滚动条,但它也不允许滚动.有没有办法滚动滚动条而不显示滚动条?
我想在我的应用程序中使用FlatList(React-native).我正在水平使用它,可以看到滚动条.ScrollView中有一个选项可以隐藏滚动条但不能隐藏在FlatList中.有没有人能够以其他方式隐藏它.我尝试使用父和子容器的解决方案(隐藏滚动条,但仍然能够滚动),但没有工作.
import React, { Component } from 'react';
import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
import { Card, Button } from 'react-native-elements';
const data = [
{ id: 1, title: 'title 1', details: 'details 1 details 1 details 1' },
{ id: 2, title: 'title 2', details: 'details 2 details 2 details 2 details 2 details 2 details 2' },
{ id: 3, title: 'title 3', details: 'details 3 details 3' },
{ id: 4, …Run Code Online (Sandbox Code Playgroud) 我有这个名为items的元素,元素内的元素长度超过元素高度,我想让它可滚动但隐藏滚动条,我该怎么做?
<div class="left-side">
<div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
</div>
</div>
.left-side {
width: 1470px;
padding-top: 20px;
height: 878px;
}
Run Code Online (Sandbox Code Playgroud)
我尝试将左侧类溢出设置为auto,但是没有做任何事情.
css ×8
html ×4
javascript ×4
jquery ×4
scrollbar ×3
browser ×1
css-hack ×1
firefox ×1
modal-dialog ×1
react-native ×1