I am starting to regret moving to B4. I am already trying to troubleshoot my nav in IE 10 which is based on their example:
https://getbootstrap.com/docs/4.0/examples/jumbotron/
When I look at it on IE 10, the nav floats off the viewport edge - see search button at top right:
Isn't it supposed to work on IE10+ ?
There are a few things that I would keep in mind:
Twitter-Bootstrap v4 is still in Beta. If this is truly a bug, then I would report it to the developers.
The navbar component was redesigned completely around the flexbox. According to Can I Use, IE10 (and 11) only have partial support for the flexbox.
There is also this quote on the Browsers and Devices page:
Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality.
And just mulling through the CSS for v4, it doesn't appear as though any of the IE10 CSS prefixes are there.
The solution is to download the working version of B4-dev from git, not form the bootstrap website.
Related
according to Semantic UI's section on browser support (https://github.com/Semantic-Org/Semantic-UI#browser-support) Semantic-UI is compatible to IE9, using prefixes.
I now inspected my work with Semantic UI and saw that grid layouts make heavy use of flexbox CSS.
When I open my HTML prototype in IE9, the layout is messed up.
Can I make Semantic UI avoid using flex box layout?
Or is there a JS lib / polyfill available to get it work in IE9?
This is quite important for me, since I am developing for Enterprise customers, they are still depending on IE9...
Kind regards,
Sascha,
The linked document indeed contained an outdated passage.
Since I also posed this question on the corresponding Github project, the developers meanwhile where able to update the passaging, now stating that only IE versions >= 10 are supported by Semantic UI.
just like the title says, my website layout appears to be fine on all other browsers at various zooms, sizes and what not, but not in Safari.
The website adheres to HTML5 and CSS3 standards according to W3Cs validators, and I cannot spot any errors myself.
Website can be found at : http://www.kehza.co.uk/Arcade
It's very basic atm, I want the layout to work on all browsers before I progress. (catch bugs early on).
Edit :-
In Safari at certain zooms, massive white space appears at the bottom of the page, also a border is massively out of place.
See images for difference thanks :)
The latest version of Safari for Windows is 5.1.7, but some of the CSS tags that you are using require Safari 7.0. One example is the box-shadow for the #wrapper element. This is why the website does not display correctly in the Windows version of Safari.
Source: http://caniuse.com/#search=webkit-box-shadow.
It is rumored that Apple has dropped development for Safari on Windows. You will probably want to decide what legacy version of Safari that the website will support. If you are planning on using features of CSS3, then you will want to test the website in a later version of the Safari browser, available on the OSX platform.
I have a navigation bar that works very well in Chrome - however it fails in Internet explorer 8 or less.
the link is www.notebox.ca/AP - you may view the code there.
I know there is bootstrap, but I was wondering if there is any way to add something to the code to make it work in IE.
Thanks
https://github.com/scottjehl/Respond will polyfill the missing functionality you need in older IEs.
In Firefox 19.0.2, an input tag using the browsers styling agent has the following layout:
In Firefox 18.0.1, the same input has this layout:
As you can see the padding, border-width and width properties have all changed.
Considering the amount of sites utilizing a fixed position layout, is this a poor design decision? I'm assuming a large volume of sites will break when viewed in FF19.
Is this a common problem with new versions? Is there an approach to handle this issue?
Firefox is but one browser, and 19 is but one version of that browser. Compare those styles with styles of other browsers and you'll surely see differences.
There are browser reset libraries (take your pick) to rectify this very issue -- not just when a single browser changes between versions, but also for IE vs FF vs Chrome vs Safari vs...
I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.
The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.
What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.
Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.
You can use a script to perform that "support" for you on clients using old IE versions!
Download script here.
This script allows CSS3 support for Internet Explorer 6, 7, and 8.
The web site link!
My favourite solution to this problem is CSS3 PIE. It's an HTC which brings
a nice selection of CSS3 features to IE 6-9.
Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).
I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:
http://jquery.malsup.com/corner/
modernizr can be a good tool too!